[JavaScript知识库]解决bootstrap模态框拖动头部区域，拖出边界，拖不回来

只能点击头部拖动，经常出现下面这种拖动出页面边界后，点不到头部所以无法拖动回来的情况

图片凑活着看哈

1.下载并引入jquery-ui插件
2.全局添加模态框允许拖动事件
在调用 show 方法后触发。

    $(document).on("shown.bs.modal", ".modal", function () {
        var dialog = $(this).find(".modal-dialog");
        dialog.draggable({
            handle: ".modal-header",   // 只能点击头部拖动
            cursor: 'move',
            refreshPositions: false,
            scroll: false
        });
        $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
    });

3.全局添加关闭模态框事件
当调用 hide 方法时触发。
关闭之后将$(this).find('.modal-content').context上面的style样式去掉，这样就恢复原样了

    $(document).on('hidden.bs.modal', ".modal", function (e) {
       console.log("我关闭了")
        $('.modal-dialog').each(function(i){
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            $(this).find('.modal-content').context.style[0]=""
            $(this).find('.modal-content').context.style[1]=""
            $(this).find('.modal-content').context.style.cssText=""
            $clone.remove();
        });
    })

总结：
bootstrap modal 的事件:

show.bs.modal：在调用 show 方法后触发。

show.bs.modal：当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

hide.bs.modal：当调用 hide 方法时触发。

hidden.bs.modal：当模态框完全对用户隐藏时触发。

注意：
这两处是写在公用的方法，并且两个同级，别走弯路了哦

    $(document).on("shown.bs.modal", ".modal", function () {
        var dialog = $(this).find(".modal-dialog");
        dialog.draggable({
            handle: ".modal-header",   // 只能点击头部拖动
            cursor: 'move',
            refreshPositions: false,
            scroll: false
        });
        $(this).css("overflow", "hidden"); // 防止出现滚动条，出现的话，你会把滚动条一起拖着走的
    });
    $(document).on('hidden.bs.modal', ".modal", function (e) {
       console.log("我关闭了")
        $('.modal-dialog').each(function(i){
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            $(this).find('.modal-content').context.style[0]=""
            $(this).find('.modal-content').context.style[1]=""
            $(this).find('.modal-content').context.style.cssText=""
            $clone.remove();
        });
    })