Kamran
Kamran

Reputation: 4100

BootStrap: With 5 Modal Forms on a page. How to check with JavaScript/jQuery which one is open

I have 5 modal forms in a page. And I want to get the Id of the currently opened one.

I know I can check with $('#myModal').hasClass('in');. If I have 5 modal forms I have to write this 5 times. Which I don't want to.

Is there some way I can determine which modal the user has open currently open and then I will get the id of that.

Upvotes: 0

Views: 84

Answers (3)

Shehary
Shehary

Reputation: 9992

It's very simple, with bootstrap modal event's

To get any attribute value from the modal trigger button you can use $(e.relatedTarget)

To get the modal attribute value you can use $(e.currentTarget)

In your case, you can get the Opened modal id with

$('.modal').on('shown.bs.modal', function(e) {
    var modalid = $(e.currentTarget).attr('id');
});

Fiddle

Upvotes: 1

DavidDomain
DavidDomain

Reputation: 15293

You can use the shown.bs.modal event to get the current open modal.

Modal Events

shown.bs.modal

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

Here is an example

$('.modal').on('shown.bs.modal', function (e) {
  var crntModalId = "current modal id is: " + $(this).attr('id');
  $('.output').text('');
  $('.output').text(crntModalId);
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="output"></div>

<br>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-One">
  Launch modal one
</button>

<!-- Modal -->
<div class="modal fade" id="myModal-One" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal-Two">
  Launch modal two
</button>

<!-- Modal -->
<div class="modal fade" id="myModal-Two" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Franco
Franco

Reputation: 2329

A bootstrap modal gets automatically the class 'shown.bs.modal' when is open, so you can use this to track which one is open.

Upvotes: 0

Related Questions