Modal dialog box in Bootstrap

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">
&times;</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">
&times;</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: 8443

Comments
25 December
2013
Leo
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
09 September
2013
Tony
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...
04 September
2013
Tony
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.
09 September
2013
Rishi
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
04 September
2013
Tony
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?
05 October
2013
Sohel
The remote file (external file) should contain proper html structure.

04 September
2013
Rishi
Have you downloaded the example file? Does it works?
comments powered by Disqus