How To Create Bootstrap 3 Modal Window

A modal window is a popup window loke lightbox , there is a three size modal window in bootstrap 3 , today we will going to discuss abpot 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 modalwidow open on load.

Make the modal window trigger

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

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 class name .modal and .fade and role="dialog"

Model Dialog:

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

Model Content:

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

Model Header:

Inside the model content take a div with classname .modal-header to make a model header and you can use heading peragraph and cloassing button etc isider the modal header

Modal Body

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

Modal Footer

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

Modal Cloassing:

The modal window will be cloased if you click outside of the modal window, but you can create a button to make the modal cloase on click the button and to make that use class name .close and and data-dismiss="modal" to the cloasing 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 size 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 nam

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

Medium or Default Modal Size:

To make a medium or default modal size, use 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 usefull.

Thanks for Reading.

Share The Post On -

Add a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.