解决bootstrap模态框拖动头部区域，拖出边界，拖不回来

加蓓努力我先飞

已于 2022-11-02 15:24:13 修改

阅读量654

点赞数

分类专栏： bootstrap 文章标签： bootstrap

于 2022-11-02 15:22:08 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/127651875

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

图片凑活着看哈

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();
        });
    })