Open and close Bootstrap modal with jQuery

By Faruque Ahamed Mollick

Bootstrap modal can easily open and close just with a button. Below is an example:



<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#theModal">Open Modal</button>

<!-- Start Modal -->
<div class="modal fade" id="theModal" role="dialog">
  <div class="modal-dialog">
  
    <!-- Modal content here-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">X</button>
        <h4 class="modal-title">Modal heading text</h4>
      </div>
      <div class="modal-body">
        <p>Modal content will be here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    
  </div>
</div>

In the above example, we can open the modal by clicking a button and then can close it by clicking the close button or the “X” sign of the modal.

But in some situation, depending upon the condition, we need to open and close the modal. In these case, we need to show and hide the Bootstrap Modal via JavaScript or jQuery. So, in this tutorial, we are going to see how to open and close a Bootstrap modal in jQuery.

jQuery code to open and close a Bootstrap Modal

Now we are going to see how to open and close our Bootstrap modal using jQuery.

Suppose we want to close our Bootstrap Modal that we have created above and now want to close or hide it in jQuery. Then below is the simple jQuery code that can show us our modal:

$('#theModal').modal('show');

Just by changing the ‘show’ into ‘hide’, we can hide our modal:

$('#theModal').modal('hide');

Now, we are going to create a button to open a modal but the button will work on JavaScript onclick event. Similarly, on clicking the close button of our Bootstrap modal will close the modal.

Below is the code of open and close Bootstrap Modal using jQuery:

  <button onclick="open_modal();">Open modal with jQuery</button>
  <!-- Start Modal -->
  <div class="modal fade" id="theModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content here-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" onclick="hide_modal();">X</button>
          <h4 class="modal-title">Modal heading text</h4>
        </div>
        <div class="modal-body">
          <p>Modal content will be here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" onclick="hide_modal();">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>


<script type="text/javascript">
  function open_modal()
  {
    $('#theModal').modal('show');
  }

  function hide_modal()
  {
    $('#theModal').modal('hide');
  }
</script>

So in this tutorial, we have learned how to hide and show Bootstrap Modal using jQuery.

Responsive Image Hover Effect With Pure CSS Code

Check whether a checkbox is checked in jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *