Bootstrap每天必学之模态框（Modal）插件_javascript技巧

//空白背景且点击不关闭 data-backdrop="false" //按下 esc 不关闭 data-keyboard="false" //初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。 data-show="false" //加载一次 index.html 到容器内 href="index.html"

//通过 jQuery 方式声明 $('#myModal').modal({ show : true, backdrop : false, keyboard : false, remote : 'index.html', });

//点击显示弹窗 $('#btn').on('click', function() { $('#myModal').modal('show'); });

$('#myModal').on('show.bs.modal', function() { alert('在 show 方法调用时立即触发！'); }); $('#myModal').on('shown.bs.modal', function() { alert('在模态框显示完毕后触发！'); }); $('#myModal').on('hide.bs.modal', function() { alert('在 hide 方法调用时立即触发！'); }); $('#myModal').on('hiden.bs.modal', function() { alert('在模态框显示完毕后触发！'); }); $('#myModal').on('loaded.bs.modal', function() { alert('远程数据加载完毕后触发！'); });