Bootstrap modal 水平居中、左/右侧弹出、隐藏时监听、select2被modal覆盖

1、下面是，modal在屏幕正中间显示

let _modal = $('#userModal');
			
_modal.on('show.bs.modal', function(){
    var $this = $(this);
    var $modal_dialog = $this.find('.modal-dialog');
    $this.css('display', 'block');
    $modal_dialog.css({'margin-top': Math.max(0, ($(window).height() - $modal_dialog.height()) / 2) });
});

$('.user_exp').click(function() {
    _modal.modal('show')
})

 2、下面是 modal 从左侧或者右侧显示出来，加入下面样式即可: class="modal right fade"

<style type="text/css">
    .mybtn{position:fixed; right:10px; bottom:20px; display:block; width:50px; height:50px;border-radius:50px; padding:0px; text-align:center; line-height:50px;}

    .modal.left .modal-dialog,
    .modal.right .modal-dialog {
        position: fixed;
        margin: auto;
        width: 320px;
        height: 100%;
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }

    .modal.left .modal-content,
    .modal.right .modal-content {
        height: 100%;
        overflow-y: auto;
    }

    .modal.left .modal-body,
    .modal.right .modal-body {
        padding: 15px 15px 80px;
    }

    /*Left*/
    .modal.left.fade .modal-dialog{
        left: -320px;
        -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
        -o-transition: opacity 0.3s linear, left 0.3s ease-out;
        transition: opacity 0.3s linear, left 0.3s ease-out;
    }

    .modal.left.fade.in .modal-dialog{
        left: 0;
    }

    /*Right*/
    .modal.right.fade .modal-dialog {
        right: -320px;
        -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
        -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
        -o-transition: opacity 0.3s linear, right 0.3s ease-out;
        transition: opacity 0.3s linear, right 0.3s ease-out;
    }

    .modal.right.fade.in .modal-dialog {
        right: 0;
    }

    /* ----- MODAL STYLE ----- */
    .modal-content {
        border-radius: 0;
        border: none;
    }

    .modal-header {
        border-bottom-color: #EEEEEE;
        background-color: #FAFAFA;
    }

</style>

3、监听bootstrap modal消失

// 监听modal, 消失隐藏时，执行....
$('#myModal').on('hidden.bs.modal', function () {
    // 执行....
    ....
    ....
})

4、select2被bootstrap modal 覆盖，加入以下样式：

/*select2在Bootstrap的modal中默认被遮盖，现在强制显示在最前*/
.select2-drop {
    z-index: 10050 !important;
}
.select2-search-choice-close {
    margin-top: 0 !important;
    right: 2px !important;
    min-height: 10px;
}

.select2-search-choice-close:before {
    color: black !important;
}
/*防止select2不会自动失去焦点*/
.select2-container {
    z-index: 16000 !important;
}

.select2-drop-mask {
    z-index: 15990 !important;
}

.select2-drop-active {
    z-index: 15995 !important;
}