CODEWITHSUNDEEP
jqueryhtmlbootstrap-4bootstrap-dialog
Robertcode
Robertcode

Reputation: 1001

How to open a Bootstrap 4 modal dialog using jQuery

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');

Upvotes: 3

Views: 9288

Answers (3)

Chirag Kamani
Chirag Kamani

Reputation: 21

$(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>

Upvotes: 1

kiranvj
kiranvj

Reputation: 34107

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.

enter image description here

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.

enter image description here

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....

Upvotes: 2

Mike
Mike

Reputation: 1327

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>

Upvotes: 4

Related Questions