How to Create Bootstrap Modal in your Website

How to Create Bootstrap Modal in your Website

Modals are used to show important information to site’s visitors. This can be some sort of confirmation (like cookies information, updating or deleting profile), session time out or a new product launch. We also find modals are used by website owners to collect email addresses for newsletter subscription.

Creating Bootstrap Modal in your Website

Bootstrap Modal is very easy to create and shows up on the top of your web page. This modal can be triggered by a link, button click or by a JavaScript code. The Bootstrap modal is also responsive so it automatically adapts itself to every screen size.

In order to use Bootstrap Modal in your site you must implement Bootstrap first. This tutorial – How to Use Bootstrap will help you learn the implementation part.

Below is the HTML code of the Bootstrap Modal which you can place in any of your web page.

<!-- The button that triggers the Modal -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Bootstrap Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Modal Text.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- END Modal content-->

  </div>
</div>
<!-- END Bootstrap Modal -->

You can test the above Bootstrap Modal by clicking the Open Modal button below.

Test Modal



Explanation
Trigger Part: My Bootstrap Modal id is myModal and it can be triggered by using a button or a link that should have the following 2 attributes.

  • data-toggle=”modal”
  • data-target=”#myModal”

The .modal class identifies that the div will act as the modal and the .fade class adds transition effect to it. You can remove the .fade class if you don’t want the transition effect in your Bootstrap Modal.

The .modal-dialog class is used to provide width and margin to the modal.

The .modal-header class forms the header of the modal. It contains a button with attribute data-dismiss=”modal”, on clicking it the modal closes.

The .modal-title class is the place where you can provide the title for the Bootstrap Modal.

Similarly, .modal-body is the body of the modal. Provide your contents here.

The .modal-footer is the modal footer that contains a Close button.

Trigger Bootstrap Modal with JavaScript

It is not necessary to show Bootstrap Modal by Button or Link click, in fact you can call the .modal(“show”) method though JavaScript code to show the modal.

The below JavaScript code will show the modal whenever the page is loaded.

<script>
$(document).ready(function () {
    $("#myModal").modal("show");    
});
</script>

Change Bootstrap Modal Size

You can also change the size of Bootstrap modal to a smaller or larger one. For doing this you need to add a class to class=”modal-dialog”>.

For small Bootstrap modal add modal-sm class with the modal-dialog.

<div class="modal-dialog modal-sm">
Test Small Modal



For large Bootstrap modal add modal-lg class with the modal-dialog.

<div class="modal-dialog modal-lg"> 
Test Large Modal



By default a Bootstrap Modal is medium in size.

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on “WordPress, SEO, jQuery, HTML” and more.