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 File

Total Downloads: 8815
Top