首页:
<!--添加按钮-->
<button id="test_add" >添加</button>
<!--信息保存窗口-->
<div id="win-save" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
页面按钮的事件绑定:
$("#test_add").click(function () {
$("#win_save").modal({
remote: "/test/add", //可以填写一个controller层或页面的url,会调用jquery load方法加载数据
backdrop:" static", //指定一个静态背景,当用户点击背景处,modal界面不会消失
keyboard: true //当按下esc键时,modal框消失
}).on("loaded.bs.modal", function () {
_winSelectServicer();//自定义的方法,与这里无关
$("#win-save-title").text("新增");
}).on("shown.bs.modal", function () {
_initSaveForm();//自定义的保存事件,与这里无关
$(this).off('shown.bs.modal');//解决监听多次的bug
}).on("hidden.bs.modal", function() {
$(this).removeData("bs.modal");//解决remote加载只会发生一次的bug--Bootstrap v3版本
$(this).find(".modal-content").children().remove();//消失后移除引入的html
});
// $("#test_save").on("hidden", function() {
// $(this).removeData("modal");//解决remote加载只会发生一次的bug--Bootstrap v2版本
// });
});
controller的【/test/add】方法:
@RequestMapping(value="/test/add", method = RequestMethod.GET)
public ModelAndView Add(){
ModelAndView modelAndView = new ModelAndView("windows/win-test-save");
return modelAndView;
}
ModelAndView返回的windows文件夹下的win-test-save.html页面:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="win-save-title"></h4>
</div>
<form id="win-queryForm" name="win-queryForm" class="form-horizontal" method="post">
<div class="modal-body">
<div class="row form-group">
<label for="name" class="col-sm-2 control-label">名称</label>
<div class="col-sm-4">
<input type="text" name="name" class="form-control" id="name"/>
</div>
<label for="short_name" class="col-sm-2 control-label">简称</label>
<div class="col-sm-4">
<input type="text" name="short_name" class="form-control" id="short_name"/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="win-btn-close" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" id="win-btn-save" class="btn btn-primary">保存</button>
</div>
</form>
对于model监听多次的问题,网上有些人说可以用这种方式解决:
var count = 0;
$("#myModal").on("loaded.bs.modal",function{
if(++count == 1){
//调用你需要的方法
}
//在模态框加载的同时做一些动作
});
对于这种方法,我的测试结果:如果if里面放的是保存事件(像上面的_initSaveForm())时,第一次打开model可以执行,但打开多次后就不能执行。(可能测试不对)