获取打开模态的按钮(不带data- * html标签)?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (111)

我有一个bootstrap模式,通过两个不同的按钮点击打开。如果满足给定条件的情况:

$('#buttonName').on('click', function (e) {
     var arg = something;
     if (condition) {
     $('#modalName').modal('show');
     } else { someFunction(arg); }
});

$('#otherButton').on('click', function (e) {
     var arg = something;
     if (condition) {
     $('#modalName').modal('show');
     } else { someFunction(arg); }
});

此处不能使用HTML数据属性。所以这样的事情:

<button id="buttonName" class="modalBtn" data-toggle="modal" data-target="#modalName" data-caller="button1"></button>

将无法工作,因为如果忽略on.click事件中的语句并且模态打开而不管条件是什么,这是我不想要的。

模态包含一个按钮

<div id="logoutBoxModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="true" keyboard:="true">
    <div id="" class="modal-content">                   
        <button id="modalButton"></button>
    </div>
</div>

应该根据打开它的两个按钮中的哪一个做某事。

我试过这个:

//$('#myModal') alternatively
$('.modal').on('show.bs.modal', function (e) {
    var $trigger = e.relatedTarget;
    console.log($trigger);
});

但它总是返回undefined

我能找到的所有答案都涉及数据属性的使用,这里不能使用。

总而言之,我需要的是如何将值传递给模态,以便它可以告诉按钮它应该做什么,并且所有必须使用javascript / jquery完成。

谢谢

提问于
用户回答回答于

试过了,发现了modal函数里面的两个形参作用,modal ( options , relatedTarget ),因此直接加一个$('this')就可以了。

原来:

  $('#modalName').modal('show');

修改后:

$('#modalName').modal('',$(this) );

这样就可以了。

用户回答回答于

当你打电话时$('#modalName').modal('show');,传递第二个参数。

例:

$('#modalName').modal('show', {target: e.target});

e.relatedTarget现在应该是分配了目标的对象e.target(或者您选择传递的任何内容)。

扫码关注云+社区

领取腾讯云代金券