Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / CSS

Bootstrap Modal Plugin Options

4.43/5 (4 votes)
14 Oct 2014CPOL1 min read 11.3K  
How to use option's in bootstrap modal plugin.

Bootstrap Modal Plugin Options 

In order to customize the style of modal window there are certain options which can be used either by data attributes or by javascript.

Following are the option's used in modal plugin:-

(1) Backdrop:- 

Use this option when you don't want the modal to be closed when the user clicks outside of the modal. This is one of the best option, as it is one of the basic feature required in application.

                                                                       OR

Use this if you don't want the parent window to be clicked when child window is open.

Use this data attribute:-

HTML
data-backdrop="static"      // Defaul value of this attribute is "True"
(2) Keyboard:- 

This option used when modal open/close depends on click of escape key. You need to set its value to "False" if you don't want the window to be closed on click of escape key.

Use this data attribute:-

HTML
data-keyboard="false     // Default value of this attribute is "True"
(3) Show:- 

Used to show the modal when initialized.

Use this data attribute:-

HTML
data-show="true"        // Default value of this attribute is "True"
(4) Remote:-

It can be used to load remote content. You need to specify an external page in this option. If you created any other page and want to open it as modal pop up window so set its path in this option.

Use this data attribute:-

HTML
data-remote="/remote/url"  // Default value of this attribute is "False"
There are two ways to use these option's:-

(1) By passing "Data-Attributes" to identifier.

HTML
<div class="modal fade" id="divModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" data-show="true" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="Popup.aspx">
</div>

(2) Using javascript.

JavaScript
$('#divModal').modal({ 
Keyboard: false, 
backdrop: false,
});

Note: For "Remote Option" use the Jquery "Load" method. That is used to access remote page content into the modal body.

Like this:-

JavaScript
$('#divModal').load('Popup.aspx');

By using above option's you can customize the modal pop up window.

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)