mts*_*dev 10 events bootstrap-modal twitter-bootstrap-3
我在主页上有一个欢迎类型bootstrap-modal,显示三个按钮,每个按钮应加载不同的页面
这是HTML的相关摘录
<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" >
<div class="modal-content" ;">
<div class="modal-header">
<h3 class="modal-title" id="ModalLabel">Welcome to Here</h3>
</div>
<div class="modal-body" style='height: 90.5%;'>
<span style="display:td;text-align;center;">Blah Blah BLah</span>
</div>
<div class="modal-footer">
<div class="btn-group">
<a id='taketour' class="btn btn-default btn-lg" data-dismiss="modal" ,aria-hidden="true" href="/tour">Take a tour</a>
<a id='register' class="btn btn-default btn-lg" data-dismiss="modal" aria-hidden="true" href="/add">Register</a>
<a id='login' class="btn btn-default btn-lg" data-dismiss="modal" aria-hidden="true" href="/login">Login</a>
</div>
</div>
</div>
</div>
</div
Run Code Online (Sandbox Code Playgroud)
在这里我的JS
$(window).load(function(){
$('#welcomeModal').modal('show');
});
$('#welcomeModal').on('hidden.bs.modal', function (e) {
if (e.id == 'taketour') {
$(window).location=e.href;
}
if (e.id == 'login') {
$('#welomeModal').remote='element-login';
}
});
Run Code Online (Sandbox Code Playgroud)
(注意:这个JS显然不起作用.这只是我的最后一次尝试)
所以,问题是:我如何才能找到已经从按下哪个按钮里面的hidden.modal.bs
功能?
小智 15
而不是hidden.bs.modal
,看看hide.bs.modal
,在关闭对话框之前触发.
而不是看e,尝试看document.activeElement
(像document.activeElement.innerText
,或document.activeElement.id
).
通常情况下,用户使用ESC键盘键关闭模式对话框的情况与用户使用背景(单击背景)关闭它的情况相同,因此我唯一需要检测的是用户是否关闭是否使用"关闭"按钮进行模态对话?
//This event is fired immediately when the hide instance method has been called
$('#moduleWindow').on('hide.bs.modal', function (event) {
//The default close button class is "close", if you change it please change the selector
if ( $(document.activeElement).hasClass('close') ) {
console.log('The user close the modal dialog using the Close Button');
} else {
console.log('The user close the modal dialog using Backdrop or Keyboard ESC key');
}
});
Run Code Online (Sandbox Code Playgroud)
注意:此脚本使用hide.bs.modal
与否hidden_modal_bs
.模态对话框已经关闭后隐藏事件触发,在这种情况下,您不需要关心它是如何关闭的,通常您需要在批准关闭对话框之前检测它的关闭方式(使用return true
或false
在hide.bs.modal
事件中).