How To Create Bootstrap Modal

Bootstrap Modal is very popular and important for the User Interface (UI). In this tutorial, we will learn how to create a Bootstrap Modalin 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:

Bootstrap Modal from Bootstrapbay.com — Bootstrap Modal

The Default Bootstrap Modal Code Is:

<!DOCTYPE html>  <html lang="en">  <head>  <title>Bootstrap Modal Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  </head>  <body>   <div class="container">  <h2>Modal Example</h2>    <!-- 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 class="modal fade" id="myModal" 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>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>   </div>   </body>  </html>

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:

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

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:

<!-- Modal -->     <div class="modal fade" id="myModal" 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>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>

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

<div> of the modal needs the same ID as the value of the data-target – #myModal
.modal class identifies the <div> 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:

<div> 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 <button>
.modal-body class is used to define the style of body
.modal-footer class is used to define the style of footer

If you want to see some custom Bootstrap Modal templates, you can download Little Widgets.

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

Parts of code have been taken from w3schools.com