How to use Bootstrap Modals Code with Examples, Demo

Hello friends, in this tutorial i am going to talk about Bootstrap Modals, Well i love to play with Bootstrap, for the front-end designing purpose and to develop responsive mobile sites it’s must be used. Even novice designers can also easily get started with bootstrap, okay let’s come to the today’s point about Bootstrap Modals, it is one of the most useful jQuery Bootstrap plugin. it is well developed and ready-to-use framework, contains jQuery, CSS, Component’s and plugins. so let’s get started with bootstrap modals.

Demo Script

Download Script

Bootstrap Modal Example

Here you can see the example popup of bootstrap modal. The Bootstrap Modal is a lightweight multi-purpose and responsive JavaScript popup that can be easily customize.

you can easily create a custom popup modal, as i told it is multi-purpose so it can be used show alerts, prompts and It can be also used to display videos, and images in a website inside the Modals.

Click Here to Download the Bootstrap Files.

The Modal

now let’s code a modal window, HTML Markup looks like this


    <div class="modal fade" id="mediumModal" tabindex="-1" role="dialog" aria-labelledby="myMediulModalLabel">
          <div class="modal-dialog modal-md">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                Your Modal Stuff Goes Here ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
     </div>

Trigger the Modal

you can trigger the above created bootstrap modal window with the help of button or using the link,


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#mediumModal">Launch Medium Modal</button>

using link

<a href="#" class="btn btn-lg btn-primary" 
   data-toggle="modal" 
   data-target="#mediumModal">Launch Modal</a>

Explanation

The button and link element has two custom data attributes data-toggle and data-target the data-toggle was used to trigger(modal popup) modal and data-target attribute used to open a targeted modal contains the same id attribute, here in this example the html markup div has id=”mediumModal” and button has data-target=”#mediumModal” attribute so it’s clear here, i hope so.

Large Modal

Now let’s take another example and that is a large bootstrap modal, here is the markup.


<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel"><p style="font-family:'Comic Sans MS', cursive; font-size:25px;">Working With BootStrap Modals</p></h4>
              </div>
              <div class="modal-body">
                 <label style="margin-left:120px;"><img src="bootstrap.png" /></label>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">codingcage.com</button>
              </div>
          </div>
       </div>
  </div>

in this modal the parent <div class=”modal fade” id=”largeModal”> contains 5 divs </div> , here is the simple easy to understand markup


<div class="modal fade" id="largeModal">
     <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
               <div class="modal-header">
                    <!-- Modal Header Here --> 
               </div>
               <div class="modal-body">
                    <!-- Modal Body Here -->
               </div>
               <div class="modal-footer">
                   <!-- Modal Footer Here -->
              </div>
          </div>
     </div>
</div>

Hope it’s easy to understand, now let’s create a button to popup this modal, keep one thing in mind that button should contain “data-toggle” and “data-target” custom attributes as i mention above, now … hope you can understand what to use as a value for this custom attributes data-toggle=”modal” and data-target=”#largeModal”

Demo Script

Download Script

that’s it, download the code from the given link and try it, you can also customize this modals, friends i will keep posting tutorial about bootstrap so keep visiting, hope you like it, happy coding