简单的模态框

目标区域

控制宽度

 $(document).mouseup(function (e) {
        var target = $(e.target);
        var _con = $('.menu-modal *');   // 设置目标区域
        if (!_con.is(e.target) && _con.has(e.target).length === 0 && !target.is('.menu-modal') && !target.is('#tableAddUserGroup *') && !target.is('#tableAddUserGroup') && !target.is('#ztreeModal *') && !target.is('#ztreeModal') && !target.is('.main-confirm *') && !target.is('.main-confirm')) { // Mark 1
            $(".menu-modal").css({'width': '0'}, {'margin-right': '-40px'});
            $('.close-menu,#tableUserGroupAdd').hide();
        }
    });
    $('.close-menu').on('click', function () {
        $(".menu-modal").css({'width': '0'}, {'margin-right': '-40px'});
        $('.close-menu,#tableUserGroupAdd').hide();
    })

点击显示的事件

   $(".edit-menu").on('click', function () {
                    $(".menu-modal").css({'width': '920px', 'margin-right': '0px'});
                    $('.close-menu,#tableUserGroupAdd').show();
                    groupManagement.meuuTable('url');
                })

html 代码

<input id="menu-table-ipt" type="hidden">
<div class="menu-modal">
    <button class="btn btn-primary" id="tableUserGroupAdd">新增</button>
    <button type="button" class="close float-right close-menu" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true" style="margin-top: 19px; display: inline-block;   ">×</span></button>
    <div>
        <table id="menu-table"></table>
    </div>
</div>

css样式

.menu-modal {
    position: absolute;
    right: 0;
    width: 0;
    top: 130px;
    z-index: 9;
    background: #eaeef9;
    height: 100vh;
    padding: 20px;
    margin-right: -40px;
}
.close-menu{
    margin-top: 0;
    position: absolute;
    right: 53px;
    top: -8px;
    font-size: 26px;
    color: #000;
    display: none;
}