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();
    // 防止出现滚动条，出现的话，你会把滚动条一