Bootstrap模态框（modal）多层叠加弹出、模态框样式效果设置等问题处理（持续更新帖）

在bootstrap框架使用过程中，模态框可能是最为常用的组件之一。通过弹出模态框，可以满足多种会话应用层场景，使得业务流程更加合理和人性化。今天对模态框常用的两个小功能做下记录，分别为多模态框弹出顺序设置和模态框弹出窗体可拖动设置。

一、多弹出框顺序设置

在一个场景内，可能需要弹出两个或者更多模态框，而每个模态框的弹出需要一定的逻辑顺序，这个时候要求我们合理设置弹出顺。

解决办法：最简单的处理办法就是将多个模态框的div在页面上设置相应的顺序（自上而下的排列顺序皆可），越往下排序，则弹出优先级越高（即：最外的覆盖层）。

二、模态框体拖动该设置

在场景一，模态框虽然弹出，但是默认框体是不可推动的，这样在某些场合用起来就会显得特别死板，不利于用户操作（而且也会因为遮住前面内容造成信息回览不便），因此自由可拖动的框体符合人性化设计。

解决办法：（直接代码）

1.页面引入：https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js

2.页面前端（或JS文件）引入：

// 设置弹出模态框可以拖动
$(document).on("show.bs.modal", ".modal", function(){
    $(this).draggable();
    // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
    $(this).css("overflow-y", "hidden");
});

注：该方法适用于bootstrap 3.x及以上版本

三、模态框背后阴影消除

在弹出模态框的时候，出现背后阴影是因为页面自动多生成了一个新的div作为背景板所导致，可以通过将新div删除或者设置透明的方式消除。参考方法如下：

.modal-backdrop {
    opacity: 0 !important;
    filter: alpha(opacity=0) !important;
}

四、外层弹窗对内层弹框的效果影响

在多层弹窗叠加的情况下，最外层弹框往往会影响到内一层的弹窗效果，例如内层弹框拖动出现问题等等，可以通过在外层弹窗弹出后重新添加弹出框样式效果来进行解决，参考方法如下：

$('#outermostId').on('hidden.bs.modal', function () {
    $("body").addClass("modal-open");
})

outermostId:为外层弹框的id，绑定自己的外层弹出框即可。

以上方法可供各位参考。最后还是那句话：技术仅为实现，开发重在思考！