Bootstrap: Modal Dialog Box

Sep 12, 2014

I had a post before about how to create a modal dialog box using native CSS and Javascript (no libraries).

This time, I will make one using Bootstrap.

Required:

You may download the files or just place the following code inside your <head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Next, we create our modal dialog box.

<div class="modal fade" id="modalDialog" role="dialog">
  <div class="modal-dialog">
 <div class="modal-content">
   <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <h4 class="modal-title">[Modal title]</h4>
   </div>
   <div class="modal-body">
  <h1>[Modal Body]</h1>
  <p>Lorem ipsum dolor</p>
  <a href="">Lorem ipsum dolor</a>
  <ul>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ul>
  <ol>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ol>
   </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</button>
   </div>
 </div>
  </div>
</div>

We then create the button that would allow the modal to appear.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalDialog">
 Show Modal
</button>

FIDDLE

Did this work for you?
Any better solutions?

Please feel free to drop a message on the comments section.

Tech Newbie

Pages

Bootstrap: Modal Dialog Box

No comments:

Post a Comment