Events 引导如何检测哪个按钮关闭了';隐藏的模式bs';事件函数?

Events 引导如何检测哪个按钮关闭了';隐藏的模式bs';事件函数?,events,twitter-bootstrap-3,bootstrap-modal,Events,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"

我在主页上有一个欢迎类型的引导模式,显示三个按钮,每个按钮应该加载不同的页面

这里是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显然不起作用。这只是我最后一次尝试)


因此,问题是:如何在
hidden.modal.bs
函数中找到按下的按钮?

传递的e是事件对象,您可以使用e.target获取触发该事件的Htmlement。

而不是
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');
    }
});

注意:此脚本使用的是
hide.bs.modal
而不是
hidden\u modal\u bs
。隐藏事件在模式对话框关闭后触发,在这种情况下,您不需要关心它是如何关闭的,通常您需要在批准关闭对话框之前检测它是如何关闭的(在
hide.bs.modal
事件中使用
return true
false

对于Bootstrap 3.3.4及更早版本,对于
hide.bs.modal
hidden.bs.modal
事件,传递给处理程序的
事件
对象不包含有关事件原始源的信息

bootstrap项目页面上有一个问题:它已被卷到一个更通用的票证()中,用于将原始触发器事件转发到队列中(对于4.0里程碑)

作为补充说明,我使用了以下解决方法(使用变量存储原始事件触发器):

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

$('#taketour').on( 'click', function () { eventTrigger='taketour'; } );
$('#register').on( 'click', function () { eventTrigger='register'; } );
$('#login').on( 'click', function () { eventTrigger='login'; } );
请注意,由于您的按钮具有
data dismission=“modal”
属性,当您单击按钮时,模式将被隐藏。但是,
单击
处理程序将在
模式
被隐藏之前启动并设置
事件触发器
模式
被隐藏,即在
隐藏.bs.modal
事件之前,因此事件处理程序可以是一个简单的
开关

$('#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
    }
});

你找到解决方案了吗?PS我需要检测它是data dismission=“modal”或其他什么。我通过按钮引发事件来处理这个问题,例如:
$(“.modal.modal footer.btn”)。单击(function(){$(this.nessest(.modal”)。触发器($.Event('buttonclick.bs.modal',this)););
这不是真的,
事件.target
在所有情况下都是模态本身。请注意,手动调用
.hide()
也将被视为按escape键(因为document.activeElement设置为body)。这在iPhone 6上失败。activeElement为null
$('#taketour').on( 'click', function () { eventTrigger='taketour'; } );
$('#register').on( 'click', function () { eventTrigger='register'; } );
$('#login').on( 'click', function () { eventTrigger='login'; } );
$('#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
    }
});