BootStrap modal modal window using summary _javascript technique

Modal Bomb window

Trigger element Basic structure:

Copy Code code as follows:

<button class= "btn btn-success" data-target= "#modal" data-toggle= "modal" >modal</button>

Content element Basic structure:

 <div class= "Modal Fade" id= "modal" >
 <div class= "Modal-dialog" > <div class= "modal-content"
 >
 <div class= "Modal-header" >
 <button class= "Close" data-dismiss= "modal" >x</button>
 title
 </div>
 <div class= "Modal-body" > This is
 main content
 </div>
 <div class= "Modal-footer" >
 <button class= "btn btn-default" data-dismiss= "modal" >cancel</button >
 <button class= "btn btn-success" >ok</button>
 </div>
 </div>
 </ Div>
 </div>

The key attributes of the triggering element are data-target and data-toggle,data-target corresponding to the concrete window, data-toggle= "modal" provides the HTML trigger condition

The contents of the window should be properly nested, the appearance of the window and hidden animation to be set in the outermost

Can change the size of the window through MODAL-SM and MODAL-LG, these two classes to be set on the Modal-dialog layer

The key property of the Close button in Modal-header is a style change that is implemented by the class= "closed" class, data-dismiss= "modal" provides a trigger condition for HTML shutdown

The modal window provides four properties, which are usually set on the modal window class= the "modal" layer (the outermost part of the content DOM), and four properties are:

1.data-backdrop: Whether to include a background, the default value is true and click the background to close the modal window, set to data-backdrop= "static" does not close when you click the background, set to backdrop= "false" no background

2.data-keyboard: If the modal window is closed when ESC is pressed, the modal window is closed when it is pressed, and setting to Data-keyboard= "false" does not close the modal window when you click ESC ( For this property to be in effect, set the property tabindex at the outermost layer.

3.data-show: Whether the default is displayed when initializing is true that is initially displayed, data-show= "false" does not display the first click of the trigger element to prepare the modal window when the click starts to display the modal window

4.HREF: Load Other content

JS Use method

The modal window provides four events:

1.show.bs.modal is triggered before display

2.shown.bs.modal is triggered after display

3.hide.bs.modal is triggered before hiding

4.hidden.bs.modal is triggered after hiding

Used in the following ways:

$ ("#modal"). On ("Shown.bs.modal", function () {
 alert (' already show ')
})

If we use the input form element in the modal window, it is necessary to use the shown.bs.modal if we need to be able to get the focus on each display modal window.

The modal window also provides le three parameters:

1.toggle Toggle Modal window display hidden

2.show Display modal window

3.hide Hidden Modal window

Used in the following ways:

$ ("#modal"). Modal ("show")

Modal window provides four properties can also be used by the JS way, using JS when the four properties are: backdrop, keyboard, show, remote

Used in the following ways:

$ ("#modal"). Modal ({
 backdrop: "Static",
 Keyboard:false,
 show:false
})

For more information, please click on the topic "Bootstrap Modal use Tutorial" to learn, I hope you like.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.