如何在没有ID的情况下获得Bootstrap模态？

Question

I have multiple bootstrap modal in my application and I want to call an same function on each modal shown.bs.modal event. I want to do this globally at one place but the thing that bother me is that this event needs an id attribute of a particular modal like below:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

I want to know that is there any way to do it globally as whenever some modal shows, then one function call?

Answer 1

$('#myModal') is simply a jQuery selector. Read more about the jQuery selectors. We can write anything withing $() like:

$("#myModal")         // Select an element with id "myModal"
$("body > #myModal")  // Select an element with id "myModal" which is a immediate child of the "body" tag
$("#foo .modal")      // Select all elements with a class "modal" which is inside an element with id "foo"

So, in Bootstrap, every modal has a class .modal , you can simply use that class to attach a global listener:

$('.modal').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

Or, like others have mentioned, you can give a class to all your modal where you want to do some common stuff like do-common-stuff :

<div class="modal do-common-stuff" id="foo">...</div>
<div class="modal" id="bar">...</div>
<div class="modal do-common-stuff" id="tango">...</div>

and later,

$('.do-common-stuff').on('shown.bs.modal', function () {
  $('#myInput').focus()
});

Answer 2

You can go with the Class name of model

$('.modelClassName').on('shown.bs.modal', function () {
 $('#myInput').focus()
})

Answer 3

Try it with class

$('.classNameOfModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 4

Consider accessing through class name. Dot '.' is used for class.

$('.myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

Answer 5

This is working great for me.

$(window).on("shown.bs.modal", function () {
            //Do what ever you want here...
        });