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:

Load External File

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

Options

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')