Click button in Bootstrap modal to get the launching element?

Question

How could you get the button that was originally pressed to open the modal through a button inside the modal?

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:

$('#targetModalOpener').closest('.modal')

I'd like to somehow get $('#opener') through pressing $('#targetModalOpener') .

For the purposes of this question I gave the opener an id attribute although it does not have one.

Answer 1

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.

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

Answer 2

According to the modal events you can get the event relatedTarget and save this as a data attribute of 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>

Click button in Bootstrap modal to get the launching element?

Question

2 answers

solution1
0 ACCPTED 2018-08-31 13:10:34

solution2
0 2018-08-31 13:50:02

Click button in Bootstrap modal to get the launching element?

Question

2 answers

solution1 0 ACCPTED 2018-08-31 13:10:34

solution2 0 2018-08-31 13:50:02

solution1
0 ACCPTED 2018-08-31 13:10:34

solution2
0 2018-08-31 13:50:02