modal dialog box Bootstrap-modal.js

Call mode via Data property

You can generate a dialog box without writing JavaScript code. Set on a master element, such as a button, data-toggle="modal" and then set data-target="#foo" or href="#foo" point to a dialog box that will be started.

1. <button Type="button" data-toggle= "modal" data-target="# Mymodal ">Launch modal</button>

Through JavaScript

A dialog box with ID is launched with just one line of JavaScript code myModal :

1. $(' #myModal '). Modal(options)

Options

The above options can be passed to the component via the Data property or JavaScript code. For the Data property, the option name is attached to the data- string, as if it were the data-backdrop="" same.

name	type	Default Value	Description
Backdrop	Boolean	True	Includes a modal-backdrop element. Alternatively, specify for static a backdrop which doesn ' t close the modal on click.
Keyboard	Boolean	True	Closes the modal when escape key is pressed
Show	Boolean	True	Shows the modal when initialized.
Remote	Path	False	If a remote URL is provided, content would be loaded via JQuery's method and injected into the load .modal-body . If you have the using the data API, you may alternatively with the href tag to specify the remote source. An example of shown below: <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

method. Modal (Options)

Let the content you specify become a modal dialog box. Accepts an optional parameter object .

1. $(' #myModal '). Modal({
2. Keyboard: false
3. })

. Modal (' toggle ')

Manually open or hide a modal dialog box.

1. $(' #myModal '). Modal(' Toggle ')

. Modal (' show ')

Open a modal dialog box manually.

1. $(' #myModal '). Modal(' show ')

. Modal (' hide ')

Manually hide a modal dialog box.

1. $(' #myModal '). Modal(' hide ')

Event

Modal dialogs in bootstrap expose a number of events that allow you to listen.

/tr>

event	description
show	This event fires immediately when the show instance Me Thod is called.
shown	This event was fired when the modal have been made visible to the user (would wait for CSS transitions to complete).
Hide	This event was fired immediately when the hide instance method has been C alled.
Hidden	This event was fired when the modal have finished being hidden from the user (would WA It for CSS transitions to complete).

1. $ ( ' #myModal ' on ( ' hidden ' , function () {
2. //do something ...
3. })