>我有一个引导模式,通过两个不同的按钮单击打开。 如果满足给定的 Instatnce 条件:
$('#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);
});
但它总是返回未定义。
我能找到的所有答案都涉及数据属性的使用,不能在这里使用。
总而言之,我所需要的只是如何将值传递给模态,以便它可以告诉按钮它应该做什么,并且所有这些都必须使用 javascript/jquery 完成。
谢谢
更新 - 答案
返回$trigger
变量是 Javascript 而不是 jQuery,它的数据可以用 Javascript 访问:
<button id="buttonName" class="modalBtn" data-caller="button1"></button>
var $trigger = e.relatedTarget.target;
var data = $trigger.dataset.caller;
console.log(data);
与jQuery相反:
...
var data = $trigger.data("caller");
console.log(data);
当你调用$('#modalName').modal('show');
时,传递第二个参数。
例:
$('#modalName').modal('show', {target: e.target});
e.relatedTarget
现在应该是目标分配给e.target
的对象(或您选择传递的任何对象(。
编辑(每条评论(:
$('#buttonName').on('click', function (e) {
var arg = something;
if (condition) {
// Pass target in click-event handler
$('#modalName').modal('show', {target: e.target});
} else {
someFunction(arg);
}
});
$('.modal').on('show.bs.modal', function (e) {
var $trigger = e.relatedTarget.target;
console.log($trigger);
});