Bootstrap模态框modal使用注意（关闭modal有遮罩框（黑框）、调用.modal(‘show‘)第一次有效，第二次无效解决方法、以及解绑modal框绑定的方法）

青旅半醒 2024-02-20 09:24 17阅读 0赞

## 使用前请先详细阅读官网使用文档 ##

https://www.bootcss.com/
    
    //modal官网介绍
    https://v3.bootcss.com/javascript/#modals

**如果有页面嵌套调用加载的，modal框建议放在进入 你的该操作程序界面下 只会加载一次的里面**

**注意：  
如果有对modal里面手动在js中进行attr添加属性的，记得在打开modal时使用removeAttr删除，如果modal框在会相应刷新的页面则不需要太考虑，但注意还是有添就记得删**

## 1.关闭modal有遮罩框（黑框） ##

正常使用关闭方法  
`$("#你的modal id").show('hide')`;  
后面没有如何操作是不会导致modal关闭产生遮罩的（最好在后面别加其他操作或继续执行后面的流程，执行完这句话就该结束了）

**产生这个问题是因为关闭modal后产生了后续操作，导致产生冲突（如：modal未完全关闭，后面的操作执行较快，然后又有刷新界面的操作，可能就会导致出现遮罩框）**  
解决方法：  
![在这里插入图片描述][45aa75c1541649968867234b1a921405.png]

如果想在关闭modal后进行操作，**代码示例**如下：

$("#你的modal id").show('hide')`;
    $('#你的modal id').on('hidden.bs.modal', function (e) {
        
      	// do something...
    	//解绑操作
    	$('#你的modal id').off('hidden.bs.modal');
    	//如果有return,放这
    	//return;
    })
    //这里最好不干其他操作，尽量把操作放上面的方法里面,如有刷新界面操作也是放里面

这里面的hidden.bs.modal和hide.bs.modal，我更倾向于使用hidden.bs.modal，因为他是在动画都结束后才调用，避免不必要的问题，show的时候同理

**一定在调用这几个方法后进行解绑，不然如果你在其他地方调用`$("#你的modal id").show('hide')`;\`是会导致你直接来执行这个modal关闭方法的，show的时候同理**

## 2.调用.modal(‘show’)第一次有效，第二次无效解决方法 ##

如果直接使用`$("#你的modal id").show('show')`;\`  
最好在后面别加其他操作或继续执行后面的流程，执行完这句话就该结束了

**因为直接在.modal(‘show’)下面有其他操作，导致的问题，可能有时候又能出来，有的时候又不行，比如：我一个逻辑先关该modal后判断是否需要再打开modal框操作，这就会导致很多冲突，但他并不报错。严格使用hidden.bs.modal和shown.bs.modal可以很有效避免**

$("#你的modal id").show('show')`;
    $('#你的modal id').on('shown.bs.modal', function (e) {
        
      	// do something...
    	//解绑操作
    	$('#你的modal id').off('shown.bs.modal');
    	//如果有return,放这
    	//return;
    })
    //这里最好不干其他操作，尽量把操作放上面的方法里面,如有刷新界面操作也是放里面

## 3.解绑modal框绑定的方法 ##

$('#你的modal id').off('绑定的事件名称');

如 解绑关闭modal事件和打开modal事件方法示例：

$('#你的modal id').off('shown.bs.modal');
    $('#你的modal id').off('hidden.bs.modal');

[45aa75c1541649968867234b1a921405.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/fa907ebd048e4d73bf811d86fe96cc9b.png