Bootstrap Modal Plugin

Modal is a pop up window which can also be called as a child window that appears on its parent window. A Modal is used to display some content when the user does not want to leave web page. A modal has an interaction with the parent window and the content appears in the modal window, through which the user stays on the same page. A modal is basically used for additional information or interaction, etc.

The modal plugin can be added into bootstrap individually by including the modal.js files. Modal can also be added when we use bootstrap.js files.


Usage:

Modals can be used to toggle the hidden content. A modal can be used in two different ways:


By using data attributes:

Modals can be used by using data-toggle = “modal” inside a button or link element. You also have to use data-target = “#identifier” or href = “#identifier” along with the attribute data-toggle. These are used to target to a modal that has the id = #identifier, this modal will be toggled.


By using JavaScript:

A single line of code of JavaScript can be used to call a specific modal having the id = #identifier. Consider the following statement:

$(‘#identifier’).modal(options)


Example:

Consider the following example in which we have created a modal:

CODE:

<!DOCTYPE html>

<html>

<head>

<title> Bootstrap Example</title>

<link href=”/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”/scripts/jquery.min.js”></script>

<script src=”/bootstrap/js/bootstrap.min.js”></script>

</head>

<body>

<h2>Modals in Bootstrap</h2>

<button class = “btn btn-primary btn-lg” data-toggle = “modal” data-target = “#Modal1”>

Modal Example

</button>

<div class = “modal fade” id = “Modal1” tabindex = “-1” role = “dialog”

aria-labelledby = “Modal1Label” aria-hidden = “true”>

<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” id = “Modal1Label”>

Title of Modal

</h4>

</div>

<div class = “modal-body”>

Content of Modal

</div>

<div class = “modal-footer”>

<button type = “button” class = “btn btn-default” data-dismiss = “modal”>

Close

</button>

<button type = “button” class = “btn btn-primary”>

Enter

</button>

</div>

</div>

</div>

</div>

</body>

</html>

The above example will generate the following result:

OUTPUT:

modal in bootstrap

When we click on Modal Example button, the result will be as follows:


content to modal

Explanation:

  1. In the above code, first we have to open the modal window, for this we have used button. A link can also be used for this purpose.
  2. The target of the modal in the above example in the button tag is data-target = “Modal1”. This modal will be loaded on the page. In one page we can have a number of modals when using this code. It should be noted here that more than one modal cannot be loaded at the same time.
  3. In the above code the two most important classes that are .modal and .fade are used. The class .modal is used to identify the content in the <div> tag as a modal and the class .fade is used to create an effect that whenever a modal is loaded it will be faded in and faded out.
  4. The attribute aria-labelledby is used to reference the title of the modal. In the code above the title of the modal is Modal1Label which can be used as a reference for the title of the respective modal.
  5. The window of the modal can be kept invisible till the button is pressed by using the attribute aria-hidden = “true”.
  6. The style of the modal header can be defined or customized by using <div class = “modal- header” >.
  7. The style for the close button on the modal window can be defined by suing class = “close”. This is the feature of CSS.
  8. The modal window can be closed by using data-dismiss = “modal”. This is the feature of HTML5.
  9. The body of the modal window can be set by using class = “modal-body”.
  10. The style of the modal footer can be defined or customized by using <div class = “modal- footer” >.
  11. The modal window can be opened by using data-toggle = “modal”.


Options:

There are a number of options that can be used to customize and define the modal window. These options can be used through the data attributes or we can also use them by using JavaScript code. Consider the following table in which various options for modal window are described:

Options Type Default Data Attribute Description
backdrop Boolean or string ‘static’ True data- backdrop This option is used when the user does not want to close the modal window if he clicks outside the modal window.
keyboard Boolean True data- keyboard This option is used to close the window of the modal as soon as the exit button is pressed. If the default value of this option is set to false, then we will not able to close the modal window by pressing the exit key.
show Boolean True data- show This option is used to show the modal window when it is initialized.
remote False data- remote This option is used to insert data or content into the modal. The link which is provided to href attribute is loaded.

Methods:

Consider the following table in which we have described some methods that can be used with modal ():

Method Description Example
Options- .modal (options) This method is used to activate the content as a modal. $(‘#identifier’).modal({

keyboard: false

})

 

Toggle- .modal (toggle) This method is used to toggle the modal manually. $(‘#identifier’).modal(‘toggle’)
show- .modal (show) This method is used to open a modal manually. $(‘#identifier’).modal (‘show’)
hide- .modal (hide) This method is used to hide a modal manually. $(‘#identifier’).modal (‘hide’)


Example:

Consider the following example in which methods of modals are used:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” /bootstrap / css / bootstrap. min. css” rel = “stylesheet” >

< script src = ” / scripts / jquery. min. js ” ></ script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

</ head >

< body >

< h2 > Modal Plugin Methods in Bootstrap < /h2 >

< button class = “btn btn- primary btn- lg”

data- toggle = “modal” data-target = “#Modal1” >

Modal Example

</ button >

< div class = “modal fade” id = “Modal1” tabindex = “-1” role = “dialog”

aria- labelledby = “Modal1Label” aria- hidden = “true” >

< 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” id = “Modal1Label” >

Title of Modal

</ h4 >

</ div >

< div class = “modal- body” >

Hit ESC key to close Modal window.

</ div >

< div class = “modal- footer” >

< button type = “button” class = “btn btn- default” data-dismiss = “modal” >

Close

</ button >

< button type = “button” class = “btn btn- primary” >

Enter

</ button >

</ div >

</ div >

</ div >

</ div >

< script >

$(function () { $(‘#Modal1’).modal ( {

keyboard: true

})} ) ;

</ script >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

esc

In the above example JavaScript is added using the <script> tag. We used the option keyboard, and the default value of the option is true. In this way when the esc key is pressed the window of the modal will be closed.


Events:

Consider the following table in which the events of modal plugin are discussed:

Event Description Usage
show.bs.modal This event is occurred when the modal is going to be shown (not shown yet). $(‘#identifier’).on (‘show.bs.modal’, function () {

})

 

shown.bs.modal This event is occurred when the modal has been shown. $(‘#identifier’).on (‘show.bs.modal’, function () {

})

 

hide.bs.modal This event is occurred when the modal is going to be hidden (not hidden yet). $(‘#identifier’).on (‘hide.bs.modal’, function () {

})

 

hidden.bs.modal This event is occurred when the modal has been hidden. $(‘#identifier’).on (‘hidden.bs.modal’, function () {

})

 


Example:

Consider the following example in which we have used events of modal plugin:

CODE:

<! DOCTYPE html >

< html >

< head >

< meta name = “viewport” content = “width = device- width, initial- scale = 1” >

< link rel = “stylesheet” href = “https: //maxcdn. bootstrapcdn. com/ bootstrap /3.3.7/ css/ bootstrap. min. css” >

< script src = “https: //ajax. googleapis . com /ajax /libs /jquery /3.2.0 /jquery. min. js ” ></ script >

< script src = “https: //maxcdn . bootstrapcdn. com/ bootstrap /3.3.7 /js /bootstrap . min. js” ></ script >

</ head >

< body >

< h2 > Modal Plugin Events in Bootstrap < /h2 >

< button class = “btn btn- primary btn- lg”

data- toggle = “modal” data- target = “#Modal1” >

Launch demo modal

</ button >

< div class = “modal fade” id = “Modal1” tabindex = “-1” role = “dialog”

aria- labelledby = “Modal1Label” aria- hidden = “true” >

< 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” id = “Modal1Label” >

Title of Modal

</ h4 >

</ div >

< div class = “modal- body” >

hide. bs. modal Event is used, press the close button.

</ div >

< div class = “modal- footer” >

< button type = “button” class = “btn btn- default” data- dismiss = “modal” >

Close

</ button >

< button type = “button” class = “btn btn- primary” >

Enter

</ button >

</ div >

</ div >

</ div >

</ div >

< script >

$(function () { $ ( ‘#Modal1’).modal(‘hide’)}) } ) ;

</ script >

< script >

$(function () { $ (‘#Modal1’).on (‘hide. bs. modal’, function () {

alert (‘Event (hide. bs. modal) is used’);} )

});

</ script >

</ body >

</ html >

The above code will generate the following result:

OUTPUT:

enter

When the close button is pressed an alert message will be generated, consider the following image:

ok