Modals in Bootstrap 3

• Get Your Bootstrap and jQuery files in order, this example uses Bootstrap CDN and JQuery hosted files, however you can download and serve your own files

  Add yourCSS files just before your closing </head> tag

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel='stylesheet' type='text/css'>

  Add your Javascript files just before your closing </body> tag

  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Below is the default Modal Code from Bootstrap with one edit - I have changed the ID in the target Modal to myModal1which is used as the href attribute in the button and as the id attribute in the Modal div

 <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal1" class="btn btn-primary btn-lg">Launch demo modal</a>

  <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Button Code

The first part of the code is the actual button you clicked

 <!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal1" class="btn btn-primary btn-lg">Launch demo modal</a>

In button code above, the button initiates the modal and the relationship between the button and the modal is defined by the link href="#mymodal1" in the button which is the id name of the target div in the modal, which in this example is id="myModal1"

Instead of using href in the button link you can also use the data-target attribute and give it the same value.

This is much like an anchor link to another place on the page

Modal Code

The second part of the code is the modal code itself

   <!-- Modal -->
  <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
         Modal body content
        </div>
        <div class="modal-footer">Modal Footer Content
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

The highlighted areas are where you add your header, body and footer content

To change the Modal position in the viewport you can target the Modal div id, in this example this id is myModal3

 
#myModal3 {
top:5%;
right:50%;
outline: none;
}

The outline will get rid of any focus lines that appear - then you can position the Modal in either absolute pixels terms or relative %.

A positive % value in the top attribute will push the modal down the viewport

A positive % value on the right attribute will push the modal away from the right edge of the viewport, you can also use left and bottom values.

The modal is by default positioned using fixed positioning, so it is fixed to the dimensions of the viewport.

To change the Modal size, can target the Modal class.modal-dialog, in this example this class is targetted as a child of the initial modal ID; >#myModal as there are multiple modals on the page.

 
@media screen and (min-width: 768px) {
	
	#myModal4 .modal-dialog  {width:900px;}

}

A initial media query is used to target viewports wider than 768px

Viewports less than 768px the modal will fill the width which is then set to auto, you would target Viewports less than 768px without a media query like so:

 

	#myModal4 .modal-dialog  {width:75%;}

So here the modal will occupy 75% of the viewport when the screen is less than 768px

If you are going to target both sizes - declare the media query last

To add a Modal in a Modal you just need to include the <a> code which uses either the data-target or href attribute to target the destination modal.

In this example I have placed 2 lots of the code in the footer of this modal, the first one opens a previous modal using the href and the second one opens up a modal using the data-target attribute later down in the code

          
         <a data-toggle="modal" href="#myModal3" class="btn btn-success">Show Me The Modal About Position</a>
         
         <a data-toggle="modal" data-target="#myModal6" class="btn btn-danger"> Show Me The Modal In Front</a>
          
          
          

I am the 2ndlast Modal for now as I have run out of default Bootstrap button colors.

Just keep your form code in between the <div class="modal-body></div> tags.

I am the last Modal for now as I have run out of default Bootstrap button colors.

Hello, is it me your looking for?

Looking at Modals in Bootstrap 3

• Setting up the Javascript and jQuery files
• Simple Modal Set Up
• Changing the Modal Position
• Changing the Modal Size
• Putting a Modal in a Modal
• Putting a Form in a Modal
• Showing a Modal when a page loads

To show a Modal when the page loads, you need to use a Javascript snippet, you don't need the initial button code that is going to be replaced with the javascript but you still need to create the modal content as normal with a unique ID.

Then use this javascript which needs to be placed after the jQuery and Bootstrap javascript script links. You just need to change the target ID to match the Modal that you want to load.

<script type="text/javascript">
    $(window).load(function(){
        $('#myModal9').modal('show');
    });
</script>