bootstrap如何检测哪个按钮关闭'hidden_​​modal_bs'事件func上的模态对话框？

Question

我在主页上有一个欢迎类型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

这是我的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';
    }
});

（注意：这个JS显然不起作用。这只是我的最后一次尝试）

所以，问题是：如何从内部 hidden.modal.bs函数中找到按下了哪个按钮？

Answer 1

而不是hidden.bs.modal，请查看hide.bs.modal，在关闭对话框之前触发该document.activeElement。

而不是查看e，请尝试查看document.activeElement.innerText（例如document.activeElement.id或// main.c #include <stdio.h> void foo(int x) { printf("%d\n"); } int main(int argc, char** argv) { foo(argc); return 0; } ）。

Answer 2

通常情况下，用户使用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');
    }
});

注意：此脚本使用hide.bs.modal而非hidden_modal_bs。模态对话框已关闭后隐藏事件触发，在这种情况下，您无需关心它如何关闭，通常您需要在批准关闭对话框之前检测它的关闭方式（使用return true或{{在false事件中1}}。

Answer 3

对于Bootstrap 3.3.4及更早版本，对于hide.bs.modal和hidden.bs.modal事件，传递给处理程序的event对象包含有关原始文件的无信息事件的来源。

在bootstrap项目页面上存在一个问题：#15408: Get cause of hidden.bs.modal event已被转换为更通用的票证（Bootstrap issue #15393），用于将原始触发事件转发到队列中（对于4.0里程碑）

作为旁注，我使用了以下解决方法（使用变量存储原始事件触发器）：

var eventTrigger='';

$("#myModal").submit(function(evt){
    eventTrigger=evt.type;
    // Do submit stuff
});

$('#myModal').on('hidden.bs.modal', function (evt) {
    switch(eventTrigger) {
        case "submit": // Submit. Do something
            ...
            break:
        default: // No submit (Esc key, close button, programmatic 'hide'
    };
    eventTrigger='';
});

在您的情况下，您必须添加以下事件处理程序：

$('#taketour').on( 'click', function () { eventTrigger='taketour'; } );
$('#register').on( 'click', function () { eventTrigger='register'; } );
$('#login').on( 'click', function () { eventTrigger='login'; } );

请注意，由于您的按钮具有data-dismiss="modal"属性，因此单击按钮时会隐藏模式 。但是，click处理程序会启用并设置eventTrigger 隐藏modal之前，即hidden.bs.modal事件之前，所以事件的处理程序可以是简单的switch：

$('#welcomeModal').on('hidden.bs.modal', function (e) {
    switch(eventTrigger) {
        case 'taketour':
            $(window).location=e.href;
            break; // this may be redundant, but I'm unsure.
        case 'login':
            $('#welomeModal').remote='element-login';
            break;
        case 'register':
            // do register magic
            break;
        default:
            // handle unexpected user behaviour
    }
});

Answer 4

传递的e是事件对象，您可以使用e.target获取被按下以触发该事件的HtmlElement。