bootstrap模态框使用

梦的方向!

于 2021-03-10 14:14:50 发布

阅读量335

点赞数

文章标签： css javascript java bootstrap html

本文链接：https://blog.youkuaiyun.com/qq_45541930/article/details/114633482

版权

本文介绍如何通过jQuery为Bootstrap4模态框增加拖拽功能，同时保持原网页的正常交互，包括解决滚动条显示、点击遮罩层不关闭等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap4模态框是一款十分好用的弹窗，唯一的缺憾就是弹框不能拖动改变尺寸大小。今天记录一些基于b4模态框拓展使用的一些问题。目标，使弹框可以拖动，且不影响原网页操作，如点击，输入等。
第一步：
为模态框添加拖拽功能：

 $(document).on("show.bs.modal", ".modal", function() {
       $(this).draggable({
           cursor: 'move',//光标
       });
       $(this).css("overflow", "hidden");

   });

第二步：把body中modal-open类名删除（modal-open为点击弹出框自动添加；删除的方法可用css属性覆盖其原本的属性。目的使原网页滚动条出现。）

第三步：为元素添加data-backdrop（点击遮罩层不隐藏弹框）

第四步：设置弹出框大小，避免弹出框留出多于的地方。删除自带z-index=-1,使原网页的输入框可点击。