How To Create Bootstrap 3 Modal Window

A modal window is a popup window like lightbox, there is a three size modal window in bootstrap 3, today we will going to discuss about Bootstrap 3 Modal Window.

How to make bootstrap 3 modal window

to make a modal window need to take a trigger in which on click the modal window will open or you can write some javascript code to make the modal window open on load.

Make the modal window trigger

To make a modal window trigger take a button or anchor tag (the element which is clickable) and use there data-toggle="modal" and data-target="#myModal" , Here myModal is the id of the model window.

Example:

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

Now make the popup portion.

To make the model first take a div with the id which is called by the trigger, and use the class name .modal and .fade and role="dialog"

Model Dialog:

Inside the div with the class name .modal take another div with the class name .modal-dialog

Model Content:

The Inside the div modal-dialog take a div with the class name .modal-content to make the container of the model

Model Header:

Inside the model, content takes a div with the class name .modal-header to make a model header and you can use heading paragraph and closing button etc insider the modal header

Modal Body

To create a modal body you can use the class name .modal-body inside the modal content div.

Modal Footer

To create modal footer use class name .modal-footer inside the modal container.

Modal Closing:

The modal window will be closed if you click outside of the modal window, but you can create a button to make the modal close on click the button and to make that use the class name .close and and data-dismiss="modal" to the closing button

Example:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- 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">×</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Size of Bootstrap 3 Modal

Bootstrap 3 provides us 3 different sizes modal window and they are as described be

Small Modal Size:

To make a small modal size use class name .modal-sm with the .modal-dialog class name

<div class="modal-dialog modal-sm">

Medium or Default Modal Size:

To make a medium or default modal size, use the class name .modal-dialog only.

<div class="modal-dialog">

Large Modal Size:

To make a large modal size use class name .modal-lg with the .modal-dialog class name.

<div class="modal-dialog modal-lg">

Now some script to open modal window on load or automatically

$("#myModal").modal();
.modal("toggle");
.modal("show");
.modal("hide");

I hope the post Bootstrap 3 Modal Window helped you, Please provide your comment to make the site better and more useful.

Thanks for Reading.