Bootstrap Modal

When you visit a website, you would have often seen a pop window asking you to register yourself with the website or to subscribe to email or post card etc. This window usually pops up over a parent window. The parent window is in the background and this popup window is on the foreground. This popup window is referred as modal. A modal usually helps in user interaction without closing the parent element. Typical uses of modal include user login/register, email subscription etc.

Bootstrap modal is fully responsive and is extremely easy to implement. You can either add “modal.js” file to implement modal in your application or you can use “bootstrap.js” file which includes the modal functionality by default. Take a look at the following example to see how modal is implemented in bootstrap. The code explanation is given after that.

<!DOCTYPE html>
<html>
    <head>
           
    <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.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
            
            <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#bsModal">Create Modal</button>

         
            <div id="bsModal" class="modal fade" role="dialog">
              <div class="modal-dialog">

            
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sign up</h4>
                  </div>
                  <div class="modal-body">
                    <p>Get 100 credits free of cost.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">No Thanks</button>
                  </div>
                </div>

              </div>
            </div>

    </body>

</html>

Download the code Try the code

Now once you open the above page, you should see a big green button. This button is used to toggle modal. If you look at the code of the button it contains data-toggle and data-target attribute. The data-toggle attribute tells that clicking the button toggles some modal. The id of the modal to toggle is passed to the data-target attribute.

Next the div has a class of modal and fade. The modal class specifies that this div shall act as modal. The fade class adds css fade animation when the modal is opened or closes. Next, you have another div with class “modal-dialog.”. This class sets appropriate width and height of the modal. A modal has three main parts which are depicted by three divs. The modal header div has a class of “modal-header”. Similarly, “modal-content” and “modal-footer” classes specify content and footer div for the modal.

Changing Bootstrap Modal Size

You can also change the size of the bootstrap modal. To do so, simply add modal-lg or modal-sm class to the div that contains modal-dialog class. The following page contains a large bootstrap modal. Take a look at this example.

<!DOCTYPE html>
<html>
    <head>
           
    <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.0.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body> 
            
            <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#bsModal">Create Modal</button>

         
            <div id="bsModal" class="modal fade" role="dialog">
              <div class="modal-dialog modal-lg">

            
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sign up</h4>
                  </div>
                  <div class="modal-body">
                    <p>Get 100 credits free of cost.</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">No Thanks</button>
                  </div>
                </div>

              </div>
            </div>

    </body>

</html>

Download the code Try the code

<<< Bootstrap CarouselBootstrap Popover >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .