CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-modal
bdoubleu
bdoubleu

Reputation: 6107

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:

<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.

Upvotes: 3

Views: 3127

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 2

95faf8e76605e973
95faf8e76605e973

Reputation: 14191

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>

Upvotes: 1

Related Questions