代码之家 › 专栏 › 技术社区 › SolisQuid

获取打开modal的按钮(不带data-*html标记)

modal-dialog html jquery javascript

SolisQuid · 技术社区 · 6 年前

我有一个引导模式,是打开两个不同的按钮点击。如果安装满足给定条件:

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

不起作用,因为声明来自 打开。单击 然后忽略事件,不管条件如何,modal都是打开的,这是我不想要的。

<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);
});

但它总是回来 未定义

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

谢谢

更新-答案

$trigger

<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);

1 回复 | 直到 6 年前

Jack 6 年前

当你打电话的时候 $('#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);
});

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前