BootStrap：页面上有5个模态窗体。如何检查JavaScript / jQuery哪一个是开放的

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

我在页面中有5个模态表单。我想获得当前打开的ID。

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.

我知道我可以查询$('#myModal')。hasClass('in');.如果我有5种模态形式,我必须写5次。我不想这样做。

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

有什么方法可以确定用户当前打开哪个模态,然后我会得到它的id。

3 个解决方案

#1

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

您可以使用shown.bs.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.

当模态对用户可见时将触发此事件(将等待CSS过渡完成)。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。

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>

#2

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

它非常简单,带有bootstrap模态事件

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

要从模态触发按钮获取任何属性值,您可以使用$(e.relatedTarget)

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

要获取模态属性值,可以使用$(e.currentTarget)

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

在您的情况下,您可以使用打开的模态ID

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

Fiddle

#3

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

当打开时,引导模式会自动获取类“shown.bs.modal”,因此您可以使用它来跟踪哪一个是打开的。

#1