Bootstrap Modal is very popular and important for the User Interface (UI). In this tutorial we will learn how to create a Bootstrap Modal in 2 minutes.  It offers you a way to make information available for the user, without crowding what he sees at once.

The Bootstrap Modal is one of the most popular plugins offered by Bootstrap. This is a multi-purpose popup built with HTML, CSS and JavaScript. Basically the modal is a scripted element that overlays over a website page.

Using the Bootstrap Modal plugin it is one of the best ways to load content inside a popup screen without writing any JavaScript.

Little Hack for the Lazy Bunch

If you want to easily generate the code for your Bootstrap Modal, you can use this free tool http://bootstrapbuild.com/modal.php

If you want to learn how to do it by yourself, you can follow the steps below. If you understand how to use it once, you will be able to add modals to all your next projects with very little difficulty.

A Bootstrap Modal Looks Like This:

The Default Bootstrap Modal Code Is:

    
Modal Example
    
    
    Open Modal

    
    

      


        
        

          

            ×
            
Modal Header
          
          

            
Some text in the modal.
          
          

            Close
          
        

      
    

  

 And It Looks Like This:

Getting Started

To activate the modal you’ll need a button or a link that triggers the modal and the code for the modal itself.

1. The Trigger Part

As shown in the extended code snippet from before, here is the trigger:

Open Modal

You can switch between a button tag or an link and add different classes, but the important thing to remember is to add the data-toggle and the data-target attributes (these are responsible for calling the popup that will appear).

Taking them one by one:

• data-toggle="modal" opens the modal window
• data-target="#myModal" points to the id of the modal

2. The Modal Part

The code for the popup that appears when the back-shadow drops is the following:

The tags and properties that define the modal are the following:

• of the modal needs the same ID as the value of the data-target – #myModal
• .modal class identifies the
  as modal
• .fade class ads transition effect to the modal
• .model-dialog sets width and margin of the modal
• role=”dialog” improves accessibility for people that are using screen readers

The tags and properties for the content inside the modal are the described below:

• with class=”model-content” adjusts the style for the modal
• .modal-header class is used to define the style of header
• data-dismiss=”modal” close the modal when you click on the
• .modal-body class is used to define the style of body
• .modal-footer class is used to define the style of footer

That’s all folks! I hope it will help you create a bootstrap modal.

Follow us on Facebook and Twitter to learn cool stuff about Bootstrap.

Parts of code have been taken from w3schools.com

The post How to create a working Bootstrap Modal with HTML appeared first on BootstrapBay.