Shulou(Shulou.com)06/02 Report--

What does bootstrap modal mean? in view of this question, this article introduces in detail the corresponding analysis and answers, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

In bootstrap, modal refers to a "modal box", a sub-form that covers the parent form; its purpose is to display content from a separate source that can have some interaction without leaving the parent form. Modal boxes can add eye-catching prompts and interactions to your site for notifying users, guest interactions, message alerts, or custom content interactions.

Operating environment of this tutorial: Windows7 system, bootsrap3.3.7 version, DELL G3 computer

A Modal is a child form that overrides the parent form. Typically, the goal is to display content from a separate source, and there can be some interaction without leaving the parent form. Sub-forms can provide information, interactions, and so on.

Bootstrap pop-up mode box styl

Use Bootstrap's JavaScript modal box plug-in to add eye-catching prompts and interactions to your site for notifying users, guest interactions, message alerts, or custom content interactions.

Close the mode box:

Click the x in the upper right corner

Click the close button in the lower right corner

Click on the mask layer

Operation principle

Pop-up modal boxes are built with HTML, CSS, and Javascript on top of other presentation elements in the document, and scrolling events are removed from them so that the contents of the modal box itself can be scrolled.

Click the "backdrop" (gray background area) of the modal box and the dynamic module box will be automatically closed.

Bootstrap supports only one modal window at a time, not nested mode, because that overlay will result in a poor user experience.

The modal box uses position: fixed, which is very different from other elements in rendering. Please put the HTML of the pop-up modal box at the top level as much as possible to avoid interference from other elements, especially if you may encounter problems with the .modal event defined in another fixed element.

Also affected by the position: fixed attribute, there are some considerations for using modal boxes on mobile devices.

According to the semantic definition of HTML5, the autofocusHTML attribute has no effect on the Bootstrap modal box, and some JavaScript is needed to achieve the same effect.

Ordinary modal frame

.modal: the outermost container of the modal box.

.modal-dialog: the container for the modal box.

Modal-content: places the contents of the modal box and sets the style of the modal box.

.modal-header: the header of the modal box.

.modal-title: the title of the modal box.

.modal-body: the body content of the modal box.

.modal-footer: the footer content of the modal box.

Title × ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Close and save the normal modal box

Modal box with scroll bar

When the mode of the user's viewport viewport (pop-up content area) or device becomes longer, they automatically scroll the page.

Title ×

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Ur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Close the modal box with scroll bars saved

Vertically centered modal box

Add .modal-dialog-centered to the .modal-dialog dialog to center vertically.

Title × vertically centered modal box Close the modal box that saves vertical centering

A modal box containing a grid system

By adding the .container-fluid grid system to .modal-body, you can use the Bootsrap grid system in dynamic windows and use the normal grid system class definition anywhere.

Title × Column 1, column 2, column 3, column 4 Column 1, column 2, column 3 Column 4 column 1 column 2 6 extra-large screens Large screen 4, medium screen 3, small screen 2, ultra-small screen 1 super-large screen 6, large screen 4, medium screen 3, small screen 2, ultra-small screen 1 super-large screen 6, large screen 4, medium screen 3, small screen 2 Super small screen 1 super large screen 6, large screen 4, medium screen 3, small screen 2, ultra small screen 1 super large screen 6, large screen 4, medium screen 3, small screen 2 Super small screen 1 super large screen 6, large screen 4, medium screen 3, small screen 2 Ultra-small screen 1 close and save A modal box containing a grid system

Dimensions of the modal box

Add modal box dimensions to .modal-dialog.

Class description Modal max-width.modal-xl Super size 1140px.modal-lg large size 800pxnone (default) default size 500px.modal-sm small size 300px title × oversized mode box closed Save title × Large size mode box to close and save Title × Small size mode box close save Large size mode box large size mode box small size mode box

Use data properties

The data attribute, which needs to be added to the button.

Whether data-backdrop displays the mask layer

Data-keyboard press esc whether to close the modal box

Data-focus lets the modal box get the focus

Whether the modal box is displayed during data-show initialization

Title × data attribute Turn off save data properties

JavaScript method event

Methods:

.modal (options): activate your content as a modal to add options to the object.

.modal ('toggle'): manually toggles the dynamic modal box and returns it to the caller before the dynamic modal box is actually shown or hidden (that is, before the shown.bs.modal or hidden.bs.modal event occurs).

.modal ('show'): manually opens the dynamic modal box and returns it to the caller before the dynamic modal box is actually displayed (that is, before the shown.bs.modal event occurs).

.modal ('hide'): manually hides the dynamic modal box and returns it to the caller before the dynamic modal box is actually hidden (that is, before the hidden.bs.modal event occurs).

Events:

Show.bs.modal:

This event is triggered immediately when the show instance method is called. If it is caused by a click, the clicked element is available and becomes the relatedTarget attribute of the Event object.

Shown.bs.modal:= "normal" data-row-style= "normal" >

This event is triggered when the modal box is visible to the user (you need to wait for the CSS transition to complete). If it is caused by a click, the clicked element is available and becomes the relatedTarget attribute of the Event object.

Hide.bs.modal: this event is triggered immediately when the hide instance method is called.

Hidden.bs.modal:

This event is triggered when the modal box is finally hidden from the user (you need to wait for the CSS transition to complete).

Bootstrap pop-up modal box style title × data property closes save methods and events $('# myBtn') .click (function () {$('# myModal'). Modal ('show');}); / * $(' # myModal'). Modal ('show'); setTimeout (function () {$(' # myModal'). Modal ('hide');}, 2000) * / / event $('# myModal'). On ('show.bs.modal', function (e) {console.log (' before display');}); $('# myModal'). On ('shown.bs.modal', function (e) {console.log (' fully displayed');}); $('# myModal') .on ('hide.bs.modal', function (e) {console.log (' hide before');}) $('# myModal') .on ('hidden.bs.modal', function (e) {console.log (' completely hidden');})

This is the end of the answer to the question about what bootstrap modal means. I hope the above content can be of some help to you. If you still have a lot of doubts to solve, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.