Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Dropdown Plugin Bootstrap Transition Effects Plugin

Bootstrap Modal (Modal) Plugin

The Modal is a child window overlaying the parent window. Typically, the purpose is to display content from a separate source, allowing for some interaction without leaving the parent window. The child window can provide information, interaction, and so on.

If you want to refer to the functionality of the plugin separately, you need to refer to modal.js. Or as Bootstrap Plugin Overview As mentioned in the chapter, you can refer to bootstrap.js or the compressed version bootstrap.min.js.

Usage

You can switch the hidden content of the Modal plugin:

via the data attributeSet attributes on the control element (such as buttons or links) data-toggle="modal"and set data-target="#identifier" or href="#identifier" to specify the specific modal box (with id="identifier") to be switched.
Through JavaScript: With this technique, you can call the modal box with id="identifier" with a simple line of JavaScript:
```
$('#identifier').modal(options)
```

Online Example

A static modal window example is shown below:

Online Example

Example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　Modal Box(Modal) Plugin</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Create Modal Box(Modal)</h2>
<!--　button to trigger the modal　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Start the modal demonstration
</button>
<!--　Modal (Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">
					×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					Modal (Modal) Title
				</h4>
			</div>
			<div class="modal-body">
				Here add some text
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close
				</button>
				<button type="button" class="btn btn-primary">
					Submit Changes
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal　-->
</div>
</body>
</html>

Test and see ‹/›

The result is as shown below:

Code explanation:

To use the modal window, you need some kind of trigger. You can use a button or a link. Here we use a button.
If you look carefully at the code above, you will find in the <button> tag that,data-target="#myModal" is the target modal box you want to load on the page. You can create multiple modal boxes on the page and create different triggers for each modal box. Now, it is obvious that you cannot load multiple modules at the same time, but you can create multiple modal boxes on the page that can be loaded at different times.
There are two points to note in the modal box:
The first is .modal, is used to identify the content of <div> as a modal box.
The second is .fade class. When the modal box is switched, it will cause the content to fade in and out.
aria-labelledby="myModalLabel", this attribute refers to the title of the modal box.
attribute aria-hidden="true" is used to keep the modal window invisible until the trigger is triggered (such as clicking on the related button).
<div>, modal-header is a class that defines the style for the header of the modal window.
class="close", close is a CSS class, used to set the style for the close button of the modal window.
data-dismiss="modal", is a custom HTML5 Data attribute. Here it is used to close the modal window.
class="modal-body", is a CSS class of Bootstrap CSS, used to set the style for the main body of the modal window.
class="modal-footer", is a CSS class of Bootstrap CSS, used to set the style for the bottom of the modal window.
data-toggle="modal", HTML5 Custom data attribute data-toggle is used to open the modal window.

Option

There are some options that can be used to customize the appearance and sensory of the modal window (Modal Window), which are passed through the data attribute or JavaScript. The following table lists these options:

Option name	Type/Default value	Data attribute name	Description
backdrop	boolean or string 'static' Default value: true	data-backdrop	Specify a static background that will not close the modal when the user clicks outside of it.
keyboard	boolean Default value: true	data-keyboard	Close the modal when the escape key is pressed, set to false when the key is invalid.
show	boolean Default value: true	data-show	Show the modal when initialized.
remote	path Default value: false	data-remote	Using jQuery .load Methods, inject content into the body of the modal. If an href with a valid URL is added, the content within it will be loaded. As shown in the following example: <a　data-toggle="modal"　href="remote.html"　data-target="#modal">Click me</a>

Methods

The following are some useful methods that can be used with modal().

Methods	Description	Example
Options: .modal(options)	Activate the modal with content. Accepts an optional options object.	$('#identifier').modal({ keyboard: false )
Toggle: .modal('toggle')	Manually toggle the modal.	$('#identifier').modal('toggle')
Show: .modal('show')	Manually open the modal.	$('#identifier').modal('show')
Hide: .modal('hide')	Manually hide the modal.	$('#identifier').modal('hide')

Online Example

The following examples demonstrate the usage of the methods:

Online Example

Example

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap Example　-　Modal Plugin Method/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2Modal Plugin Method/h2>
<!--　button to trigger the modal　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	Start the modal demonstration
</button>
<!--　Modal (Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					Modal (Modal) Title
				</h4>
			</div>
			<div class="modal-body">
				Press the ESC button to exit.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">Close
				</button>
				<button type="button" class="btn btn-primary">
					Submit Changes
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal-dialog　-->
</div><!--　/.modal　-->
</body>
</html>

Test and see ‹/›

The result is as shown below:

Just click the ESC key, and the modal window will exit.

Events

The following table lists the events used in the modal. These events can be used as hooks in functions.

Events	Description	Example
show.bs.modal	Triggered after the show method is called.	$('#identifier').on('show.bs.modal', function () { 　　//　Perform some actions... )
shown.bs.modal	Triggered when the modal is visible to the user (the CSS transition effect will be awaited).	$('#identifier').on('shown.bs.modal', function () { 　　//　Perform some actions... )
hide.bs.modal	Triggered when the hide example method is called.	$('#identifier').on('hide.bs.modal', function () { 　　//　Perform some actions... )
hidden.bs.modal	Triggered when the modal is completely hidden from the user.	$('#identifier').on('hidden.bs.modal', function () { 　　//　Perform some actions... )

Online Example

The following example demonstrates the usage of events:

The result is as shown below:

As shown in the above example, if you click on close button, that is hide An alert message will be displayed if an event occurs.

Bootstrap Dropdown Plugin Bootstrap Transition Effects Plugin