以编程方式显示 Bootstrap 模态窗口

Question

I am using JavaScript. I don't know how to open bootstrap modal. It works fine when I click on below button:

 <button type="button" class="btn btn-primary" data-toggle="modal" id="btnOpenPopup" data-target="#myModal">
     Open modal
 </button>

But I want to open it without user event, it should be opened programmatically.

I tried with $("#btnOpenPopup").click(); and (document.getElementById('btnOpenPopup')).click(); but it's not working.

Below is my modal.

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
          Modal body..
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

Try this. Its working for me.

If You have a login button and If login details is correct then You want to show this popup. Then do something like this.

<button type="button" class="btn btn-primary" onclick="checkUserDetails()"> Login</button>

Then In your script tag or your js file

function checkUserDetails() {
  // Check user details here 
  if (loginDetail) {  
    $("#YourModelName").show();   // show modal/popup
  } else {
    // do somethimg if logindetails is not valid
  }
}

Hope it help you.

Answer 2

You can toggle a modal by using the modal() function.

$("#myModal").modal(show | hide)

This is the same for Bootstrap 3 and 4.

See source here .

Answer 3

For Bootstrap 4.x it look like the good way is

$('#myModal').modal('show')

Source: http://getbootstrap.com/docs/4.1/getting-started/javascript/

Answer 4

Try putting the modal() function inside document.ready

$(document).ready(function() {
    $('#myModal').modal('show');
});

Heres the working Fiddle

Answer 5

You can do it manually by .hide() and .show()

$(function(){
   $("#myModal").hide();
   $("#btnOpenPopup").click(function(){
         $("#myModal").show();
    });
 });