Holla Tech - Learn
Bootstrap 3: Modal
 

A modal is a popup window or dialog box which will be displayed on top of the current page. Modals are easily created using Bootstrap.
To create a modal, start by creating a trigger for the modal. For example, a <button> element with data-toggle=”modal” property and data-target=”#myModal” where myModal is the id of the modal <div> that pops up on clicking this button.

Other requirements for the modal are:
A <div> of class modal to hold the entire modal.
A <div> of class modal-dialog to hold the modal dialog.
A <div> of class modal-content to hold the content of the modal.
A <div> of class modal-header to hold the header of the modal in which a heading element of class modal-title holds the title of the modal.
A <div> of class modal-body to hold the body of the modal.
A <div> of class modal-footer to hold the footer of the modal.

The code below displays a modal when a button is clicked: 

<div class=“container”>
  <button type=“button” data-toggle=“modal” data-target=“#myModal”>Open Modal</button>
  <div id=“myModal” class=modal>
    <div class=modal-dialog>
      <div class=modal-content>
        <div class=modal-header>
          <h3 class=modal-title>Header</h3>
          <button data-dismiss=“modal”>X</button>
        </div>
        <div class=modal-body>Body</div>
        <div class=modal-footer>Footer</div>
      </div>
    </div>
  </div>
</div>

 

Modals is a plugin, and is included in the Bootstrap JS file.

TASK:
Paste the line of codes in a text editor and play around with the outputs and see a Bootstrap modal in action.

BACK  
NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT