BootStrap中Modal（模态框）的使用

BootStrap中Modal（模态框）的使用

1、静态打开：通过data属性打开隐藏模态框

设置按钮button的data-toggle:“modal”（以模态框的形式打开），data-target:"#myModal"（设置为modal的id）

2、动态打开：以jquery代码为例

$("#myModal").modal({
	remote:"test/test.jsp";//可以填写一个url，会调用jquery load方法加载数据
	backdrop:"static";//指定一个静态背景，当用户点击背景处，modal界面不会消失
	keyboard:true;//当按下esc键时，modal框消失
}

// bootstrap modal动态加载内容
$("#test .modal-body").load('test_url?id=' + id,function(){
    $("#followStep1").modal("show");
})

remote处可以填写jsp路径或者html路径，用来给modal框注入内容

3、动态打开事件：

在modal框加载同时，提供几个方法用来控制modal框

$("#myModal").on("loaded.bs.modal",function{

//在模态框加载的同时做一些动作

});

$("#myModal").on("show.bs.modal",function{

//在show方法后调用

});


$("#myModal").on("shown.bs.modal",function{

//在模态框完全展示出来做一些动作

});

$("#myModal").on("hide.bs.modal",function{

//hide方法后调用

});

$("#myModal").on("hiden.bs.modal",function{

//监听模态框隐藏事件做一些动作

});

4、解决remote只加载一次问题：

我们在使用js动态打开modal框使用remote请求数据，只会加载一次数据，所以我们需要在每次打开modal框钱移除节点数据。

解决方案：

//v2
$("#myModal").on("hidden", function() {  
    $(this).removeData("modal");  
});  
//v3
$("#myModal").on("hidden.bs.modal", function() {  
    $(this).removeData("bs.modal");
}); 

5、解决事件监听多次：

第一次打开modal框正常，第二次，第三次，第n次打开就有可能会出现事件监听多次的奇怪问题（尤其是多个modal窗口叠加，出现这种问题的几率更高，我大致判断有可能是组件bug），所以无奈之举的办法，只适合应急使用：就是强行让他只调用监听一次

int count = 0 ;
$("#myModal").on("loaded.bs.modal",function{
if(++count == 1){
//调用你需要的方法
}
//在模态框加载的同时做一些动作
});

总结：modal框是个很好用的组件，不过官方文档提醒最好不要多个modal叠加很容易出现很难解决的前端组件问题。