为Bootstrap Modal（模态框）全局添加拖拽操作

r囧r小猫 2022-07-17 04:09 174阅读 0赞

在js中绑定方法

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

bootstrap modal 的events:  
查了好久才查到：(

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show.bs.modal</td> 
   <td>在调用 show 方法后触发。</td> 
   <td><code> $("#identifier").on('show.bs.modal', function(){//do sth. });</code></td> 
  </tr> 
  <tr> 
   <td>show.bs.modal</td> 
   <td>当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。</td> 
   <td><code> $("#identifier").on('shown.bs.modal', function(){//do sth. });</code></td> 
  </tr> 
  <tr> 
   <td>hide.bs.modal</td> 
   <td>当调用 hide 方法时触发。</td> 
   <td><code> $("#identifier").on('hide.bs.modal', function(){//do sth. });</code></td> 
  </tr> 
  <tr> 
   <td>hidden.bs.modal</td> 
   <td>当模态框完全对用户隐藏时触发。</td> 
   <td><code> $("#identifier").on('hidden.bs.modal', function(){//do sth. });</code></td> 
  </tr> 
 </tbody> 
</table>

详细参考：[http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html][http_www.runoob.com_bootstrap_bootstrap-modal-plugin.html]

[http_www.runoob.com_bootstrap_bootstrap-modal-plugin.html]: http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap 模态框（Modal）插件数据传值

模态框具体代码如下：  <div class="modal fade" id="update" tabindex="-1

ゝ一纸荒年。/ 2022年07月30日 13:23/ 0 赞/ 289 阅读

相关为模态对话框添加拖拽

$(document).ready(function() { //为模态对话框添加拖拽 $(".modal-dialog").dra

谁借莪１个温暖的怀抱￠/ 2022年07月19日 05:20/ 0 赞/ 162 阅读

相关为Bootstrap Modal（模态框）全局添加拖拽操作

在js中绑定方法 $(document).on("show.bs.modal", ".modal", function(){ $(this).dra

r囧r小猫/ 2022年07月17日 04:09/ 0 赞/ 175 阅读

相关关于BootStrap中Modal（模态框）使用心得

一、modal使用： 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入bootstrap

ゝ一纸荒年。/ 2022年06月18日 04:11/ 0 赞/ 372 阅读

相关 Bootstrap 模态框（Modal）插件数据传值

模态框具体代码如下： \[html\] [view plain][] [copy][view plain] 1.  2.

朴灿烈づ我的快乐病毒、/ 2022年06月04日 00:50/ 0 赞/ 660 阅读

相关 Bootstrap模态框(Modal)插件

Bootstrap模态框(Modal)插件 1.定义模态框(Modal)是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独源的内容，可以在不离开父窗体的情况

深碍√TFBOYSˉ_/ 2022年05月28日 01:59/ 0 赞/ 308 阅读

相关 bootstrap 模态框modal

1. 使用前提: 加载mode.js或bootstrap.js或压缩版的 bootstrap.min.js 2. 两种触发显示: 通过 data 属性：在控制器元素（

亦凉/ 2022年05月24日 10:17/ 0 赞/ 371 阅读

相关关于BootStrap中Modal（模态框）使用心得

一、modal使用 1.1、登录bootstrap官网，点击下载Bootstrap 1.2、导入对应的样式文件css 1.3、导入对应的js，需要导入boots

快来打我*/ 2022年05月22日 08:25/ 0 赞/ 279 阅读

相关 Bootstrap 模态框（Modal）插件

Bootstrap 模态框（Modal）插件模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有

ゝ一纸荒年。/ 2022年03月21日 12:28/ 0 赞/ 400 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 445 阅读