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.


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

<script src="//"></script>
<link href="//" rel="stylesheet">
<script src="//"></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 class="modal-body">
  <h1>[Modal Body]</h1>
  <p>Lorem ipsum dolor</p>
  <a href="">Lorem ipsum dolor</a>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
   <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>

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


Did this work for you?
Any better solutions?

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

No comments:

Post a Comment