Lets discuss how to create modal dialog box using twitter bootstrap. You need to include bootstrap.css
and bootstrap.js file in your page where you want to display the dialog box.
Click here to
learn detail about bootstrap and download the required files.
HTML Button Code:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">
Launch demo modal</a>
HTML Modal Box Code:
<div class="modal" id="myModal">
<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 Goes Here</h4>
</div>
<div class="modal-body">....</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Do Nothing</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Output:
Launch demo modal
Load External File
Bootstrap modal box also provide option to load external page. You need to pass
the page name in
href and assign the modal box id to
data-target .
HTML Button Code:
<a data-toggle="modal" href="external.html" data-target="#modal"
class="btn btn-primary btn-large">Load External Page</a>
HTML Modal Box Code:
<div class="modal" id="modal">
<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 Goes Here</h4>
</div>
<div class="modal-body">
Load Data...
</div>
<div class="modal-footer">
<a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
<a href="#" class="btn btn-primary">Do Nothing</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Output
Load External Page
Options
| Name |
Type |
Default |
Description |
| data-backdrop |
boolean |
true |
used to include a modal-backdrop element |
| data-keyboard |
boolean |
true |
Closes the modal when escape key is pressed |
| data-show |
boolean |
true |
Shows the modal when load. |
| data-remote |
path |
false |
Load external page. |
Javascript Methods
.modal(options) : Disable close Modal box on press escape.
$('#myModal').modal({
keyboard: false
})
.modal('toggle') : Manually toggles a modal box.
$('#myModal').modal('toggle')
.modal('show') : Manually display a modal box.
$('#myModal').modal('show')
.modal('hide') : Manually hide a modal box.
$('#myModal').modal('hide')
Download Example File
Total Downloads: 8780
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam facilisis dui sagittis nulla sollicitudin blandit. Nulla mollis neque felis, id mattis justo aliquam a. Proin rhoncus magna id adipiscing eleifend. Curabitur a nulla enim. Nulla facilisi.
2013
Hi,
How do I clear modal's cache on close? Because I am using it to edit records and it always picks up first clicked record's id.
Thanks
2013
This is a weird way of showing comment threads. It let's me reply to myself, but not to your posts. Anyway, I did indeed copy the entire sample and it works just fine as long as I don't include Bootstrap's 3.0 release. According to everything I've read on this subject they completely overhauled the modal and it is not backward compatible. Because this was not working and there are a billion posts out there complaining about the change, I simply gave up on Bootstrap's way and rolled my own. With that said, I will check out the "3.0.0-rc1" later today and let you know. Monday's are hard...
2013
I found that it doesn't work with bootstrap 3.0. I have no problem with previous version of bootstrap. They made a ton of changes which they claim will make it easier to style the modal.
2013
Hi,
It seems bootstrap3 js file has some problem. Can you please try including the following?
http://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js
2013
I don't get it. I copied the HTML above for the "Load External Page" exactly as written, but it does not work properly. All resources (jQuery, Bootstrap css and js) are from the latest version 3 downloaded yesterday. I have no problem with the "Launch demo modal", but the external does not work properly. It does darken the window and even fetch external.html, but instead of producing a nice modal window, the content is actually displayed in the page below. I simply do not get it. I've tried this with dozens of examples and the results are the same. Why does the external not load in #modal?
2013
The remote file (external file) should contain proper html structure.
Modal title
2013
Have you downloaded the example file? Does it works?