Bootstrap Modal Plugin Options

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:-

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:-

data-keyboard="false     // Default value of this attribute is "True"

(3) Show:- 

Used to show the modal when initialized.

Use this data attribute:-

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:-

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.

<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.

$('#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:-

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

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