在Bootstrap模态中单击按钮以获取启动元素？
[英]Click button in Bootstrap modal to get the launching element?
问题描述
How could you get the button that was originally pressed to open the modal through a button inside the modal? 
您如何通过模态内部的按钮获取最初按下以打开模态的按钮？
Html: HTML：
<button id="opener" type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" id="targetModalOpener">Button</button>
</div>
</div>
</div>
</div>
jQuery: jQuery的：
$('#targetModalOpener').closest('.modal')
I'd like to somehow get $('#opener') through pressing $('#targetModalOpener') . 我想以某种方式通过按$('#targetModalOpener')获得$('#opener') $('#targetModalOpener') 。
For the purposes of this question I gave the opener an id attribute although it does not have one. 出于这个问题的目的，我给了打开器一个id属性，尽管它没有一个。
2 个解决方案
解决方案1
0 已采纳 2018-08-31 13:10:34
You can get the button that was originally pressed to open the modal by using Bootstrap Modal Show Event and using activeElement which in this case is the button who triggered the modal. 您可以通过使用Bootstrap Modal Show Event并使用activeElement来获得最初按下以打开模式的按钮，在这种情况下， activeElement是触发模式的按钮。
$(document).ready(function(){ var opener; $('.modal').on('show.bs.modal', function(e) { opener = document.activeElement; }); $('.modal button').click(function(){ console.log(opener); }); });
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <body> <button id="openerABC" type="button" data-toggle="modal" data-target="#myModalABC">Open Modal ABC</button> <button id="openerXYZ" type="button" data-toggle="modal" data-target="#myModalXYZ">Open Modal XYZ</button> <div id="myModalABC" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" id="targetModalOpenerABC">Button</button> </div> </div> </div> </div> <div id="myModalXYZ" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" id="targetModalOpenerXYZ">Button</button> </div> </div> </div> </div> </body>
解决方案2
0 2018-08-31 13:50:02
According to the modal events you can get the event relatedTarget and save this as a data attribute of button: 根据模式事件，您可以获取事件relatedTarget并将其保存为button的数据属性：
$('#myModal').on('show.bs.modal', function(e) {
$('#targetModalOpener').data('id', e.relatedTarget);
});
$('#targetModalOpener').on('click', function(e) {
var opener = $(this).data('id');
console.log(opener.outerHTML);
})
$('#myModal').on('show.bs.modal', function(e) { $('#targetModalOpener').data('id', e.relatedTarget); }); $('#targetModalOpener').on('click', function(e) { var opener = $(this).data('id'); console.log(opener.outerHTML); $('#myModal').modal('hide') })
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <button id="opener" type="button" data-toggle="modal" data-target="#myModal">Open Modal1</button> <button id="opener2" type="button" data-toggle="modal" data-target="#myModal">Open Modal2</button> <div id="myModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" id="targetModalOpener">Button</button> </div> </div> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.