How to open a Bootstrap 4 modal dialog using jQuery

Question

How is a Bootstrap 4 modal dialog opened using jQuery?

I am able to open a modal with a button like the following, which opens a dialog with the following div:

<input type="button" 
       name="PurchaseOrderButton" 
       value="Find" 
       class="btn btn-primary" 
       data-toggle="modal"
       data-target="#id-FindModal" 
       id="id-FindBtn" 
       />

<div class="modal" id="id-FindModal">

I need to run a JavaScript function that will perform some steps, then load the modal. I attempted it with the following statement, but it does not work:

$('#id-FindModal').modal('show');

The definition of the modal is in an MVC partial view which includes nothing other than the modal definition. I thought the javascripts listed in the parent window would be passed to the partial view but maybe not. I'll have to try some testing on that. — Robertcode, Mar 14 '20 at 04:44
@Robertcode MVC has nothing to do with this. It'd help if you showed a working version of your code. As kiranvj has said, it sounds like jQuery has not been loaded. — Mike, Mar 14 '20 at 04:48

score 4 · Accepted Answer · answered Mar 14 '20 at 05:02

Your call to show the modal is fine, more than likely your Bootstrap library or your jQuery library is not loaded. Ensure that they are..

Here is a working example to confirm your method:

runCommands()


function runCommands() {
  // run commands
  $('#id-findModal').modal()
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

<div id="id-findModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The page was not using the jquery and bootstrap scripts properly. I had the scripts defined at the top of the page. When I moved them to the bottom just above the script block and added the bootstrap script the problem was fixed. — Robertcode, Mar 14 '20 at 06:20

kiranvj · Answer 2 · 2020-03-14T05:24:19.593

Looks like JS files are not loaded.

Lets do some debugging.

Open chrome dev tools. Go to console type jQuery hit enter. You should see show function in console just like below. If not you should include jQuery in you page, either in partial or in main template.

Now lets check if bootstrap js is loaded.

In console type bootstrap, you should see an object printed in console just like below image. If you dont see this you need in include bootstrap js files either in partial or in main template.

I guess popper.js is also needed to show modal. Add that also if needed.

If all the above steps are correct and still your modal not working, try this.

You might be calling modal function before DOM ready. Execute your JS scripts after DOM ready

$(function() {
  // you js code

  $('#id-FindModal').modal('show');

});

Let do some additional check as well.

$(function() {
  // your js code
  if($('#id-FindModal').length) {
     $('#id-FindModal').modal('show');
  } else {
    alert("Element with id - id-FindModal could not be found.");
  } 
});

Happy coding....

score 1 · Answer 3 · answered Mar 14 '20 at 05:27

$(document).ready(function () {
 $(document).on('click', '.open_popup', function () {
        //Your function goes here..//
  $('#myModal').modal('show');
 });
});

<a href="#" class="open_popup btn btn-xs" >Click For Popup</a>

<div id="myModal" class="modal fade" role="dialog" style="width:100%">
    <div class="modal-dialog" style="width: 60%;">
        <div class="modal-content" >
            <div class="modal-header">
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha384-6khuMg9gaYr5AxOqhkVIODVIvm9ynTT5J4V1cfthmT+emCG6yVmEZsRHdxlotUnm" crossorigin="anonymous"></script>

How to open a Bootstrap 4 modal dialog using jQuery

3 Answers3