The Bootstrap modals (modal box) is created using a custom Jquery plugin. It can be used to create modal windows to enrich the user experience, or to add useful functionality to the user. You can use the Popover (PopOver) and the ToolTip (ToolTip plugin) in the modals (modal box).
In this tutorial, you will discuss how to use Bootstrap to create modal windows with some examples and explanations. At the same time, we will discuss the various options available for customization.
What is requiredYou need Jquery, Bootstrap CSS, and JavaScript file bootstrap-modal.js. This JS file is located within the JS folder of the Bootstrap home folder you downloaded.
Jquery is located in your Bootstrap home folder under Docs > Assets > js, named Jquery.js. Or you can directly access https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to download jquery.
Bootstrap modals (modal frame) What does it look like?The following example shows what the Bootstrap modals (modal box) looks like.
Use Bootstrap modals (modal box) in your websiteThe following example shows how to use the Bootstrap modals (modal box) in a Web page. Please note that you do not need to write any JavaScript code. The example is followed by a related explanation.
<! DOCTYPE html> Lang="EN"> <meta CharSet="Utf-8"> <title>Twitter Bootstrap modals Example</title> <meta Name="description" Content="Creating Modal window with Twitter Bootstrap"><link Href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" Rel="Stylesheet"> <body><div Class="Container">Example of creating modals with Twitter Bootstrap<div Id="Example" Class="Modal Hide Fade in" Style="Display:None; "><div Class="Modal-header"><a Class="Close" Data-dismiss="Modal">X</a>This is a Modal Heading</div><div Class="Modal-body">Text in a modal<p>You can add some text here.</p> </div><div Class="Modal-footer"><a Href="#" Class="Btn btn-success">Call to Action</a><a Href="#" Class="BTN" Data-dismiss="Modal">Close</a></div></div><p><a Data-toggle="Modal" Href="#example" class= "btn btn-primary Btn-large" >launch demo modal</a></p></div><script src< Span class= "pun" >= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script><scriptsrc=></script></body></HTML>
View Bootstrap modals (modal box) instances online.
ExplainThe following table explains the above code. It will help you understand how to use the Bootstrap modals (modal box).
| Code | explain |
|---|---|
| Div id= "Example" | The value of the id,id assigned to the relevant Div points to the JavaScript behind which you want to implement the modal (modal box). |
| Class= "Modal Hide Fade in" | The Bootstrap CSS has four class-modal, hide, fade, and in to set the layout of the modal (modal box). |
| Style= "Display:none; | Used to keep the modal window visible until the trigger is triggered (such as clicking on the relevant button). |
| <div class= "Modal-header" > | The Modal-header is intended for class that defines the modal window title style. |
| A class= "close" | CSS class Close is used to set the modal window Close button style. |
| Data-dismiss= "Modal" | Data-dismiss is a custom HTML5 data property. Used to close the modal window. |
| Class= "Modal-body" | Modal-body is a CSS class for Bootstrap that sets the style of the modal window body. |
| Class= "Modal-footer" | Modal-footer is a CSS class for Bootstrap that sets the style of the end of the modal window. |
| class= "Btn btn-success" | CSS class BTN and btn-success are used to create a large button at the end of the modal window. You can use any other Bootstrap button instead. |
| Class= "BTN" | The Bootstrap CSS button class btn is used to create a small button at the end of the modal window. |
| Data-dismiss= "Modal" | The HTML5 custom Data property Data-dismiss is used to close the modal window. |
| Data-toggle= "Modal" | The HTML5 custom Data property Data-toggle is used to open the modal window. |
| class= "Btn btn-primary btn-large" | Set the button style and click the button to create the modal window. |
| <script src= "Https://ajax.googleapis.com/ajax/libs /jquery/1.7.1/jquery.min.js "></script> |
References a Jquery file. |
| <script src= ". /bootstrap/twitter-bootstrap-v2> /js/bootstrap-modal.js "></script> |
JS file referencing the bootstrap modal (modal box). |
You can use JavaScript to implement the Bootstrap modal window. You only need to call modal () in your JavaScript. Your code looks like this, and you can refer to it before the body end tag (that is, </body>).
$(function(){ $("#identifier"). Modal();}); Where identifier is a Jquery selector that identifies the associated container element. Next, let's look at what the options are.
OptionsHere are some options that you might use to customize the appearance and perception of the modal window through modal ().
BackdropThe backdrop option is used to include a modal-backdrop element.
If you replace the code with line number 2 in the "Use JavaScript" instance with the following code, the backdrop option is assigned a value of false, there is no modal-backdrop at this time.
{ $("#example"). Modal({backdrop:false}); If you use the keyboard option, the modal window is closed when you click Escape. Its type is Boolean and the default value is true. If you set the value of the keyboard option to false, the modal window will not close even if you click Escape.
If you replace the code with line number 2 in the "Use JavaScript" instance with the following code, the keyboard option is assigned to False, and clicking Escape will not close the modal window.
{ $("#example"). Modal({keyboard:false}); If you use the show option, the modal window is displayed when initializing. Its type is Boolean and the default value is true. If the value of the show option is set to false, the modal window is not displayed when initializing.
If you replace the code with line number 2 in the "Use JavaScript" instance with the following code, the show option is assigned a value of false, and the modal window is not displayed when initializing.
{ $("#example"). Modal({show:false}); Here are some of the methods used by modal ().
. Modal (Options)This method activates the content as a modal (modal box). You can refer to the options parameter of an optional object type. If you add the following code before the </body> tag in the first instance of this tutorial, there is no modal (modal box) backdrop element at this time.
$(' #example '). Modal({ backdrop:false}) This method manually switches a modal (modal box). If you add the following code before the </body> tag in the first instance of this tutorial, you can manually switch the modal (modal box).
$(' #example '). Modal(' Toggle ') This method can be used to manually open a modal (modal box). If you add the following code before the </body> tag in the first instance of this tutorial, you can manually open the modal (modal box).
$(' #example '). Modal(' show ') This method can be used to manually hide a modal (modal box). If you add the following code before the </body> tag in the first instance of this tutorial, you can manually hide the modal (modal box).
$(' #example '). Modal(' hide ') The following is a modals (modal box) related event. These events are used to intercept and execute your own code.
ShowThis event is immediately triggered when the show instance method is called.
ShownThis event is triggered when the modal box is displayed (and the CSS transition has been performed).
HideThis event is immediately triggered when the hide instance method is called. Immediately after the Hide instance method had been called, this event is called.
HiddenThis event is triggered when the modal box is hidden from the user (and the CSS transition has been performed).
Click here to download all the HTML, CSS, JS, and picture files used in this tutorial.
Bootstrap modals (modal frame)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
