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>

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>

• javascript
• html
• bootstrap-modal

• What is your bootstrap version ? – Nek Commented Apr 18, 2018 at 16:49
• 4.1.0 is my bootstrap version. – Pranita Chavan Commented Apr 18, 2018 at 16:50
• How and when do you use this function ? Is the page loaded ? – NayoR Commented Apr 18, 2018 at 16:52
• No I have a login button If login details is correct then I want to show this popup – Pranita Chavan Commented Apr 18, 2018 at 16:54
• Is there any console errors? – Vivekraj K R Commented Apr 18, 2018 at 17:39

5 Answers 5

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.

Try putting the modal() function inside document.ready

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

Heres the working Fiddle

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.

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

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

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

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

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