Bootstrap Basic Plug-in Learning Notes modal dialog box (a) _javascript tips

Bootstrap with a lot of jquery plug-ins, to the user to do front-end development provides a great convenience. For each plug-in, there are 2 ways to reference: one is a separate reference, that is, using Bootstrap's separate *.js file, this way you need to note that some plug-ins and CSS components may rely on other plug-ins, so the individual reference, you need to find out that the inclusion of a relationship with the reference The second is to directly refer to the complete bootstrap.js or compressed version of the bootstrap.min.js, it should be noted that the 2 files can not be referenced at the same time.

Bootstrap has a lot of basic plug-ins, including modal dialog box, label switching, tooltip ToolTips and so on. The first is to summarize the use of the next modal dialog box.

0X01 Basic Style

The Modal Box (Modal) is a subform that is overwritten on the parent form. Typically, the intent is to display content from a single source, and you can interact without leaving the parent form. subforms provide information, interactivity, and so on. The Bootstrap modals (modal box) is created using a custom jquery plug-in. It can be used to create a modal window to enrich the user experience, or to add practical functionality to the user.
The following is a basic style:

<! DOCTYPE html>  

The effect is as follows:

A few notes:

(1) Using modal windows, you need to have some kind of trigger that can use buttons or links. Here we are using a button.
(2) data-target= "#myModal" is the target of the modal box that you want to load on the page.
(3) In the modal box to pay attention to two points: one is. Modal, used to identify <div> content as modal frame; Fade class. When the modal box is switched, it causes the content to fade in and out.
(4) <div class= "Modal-header" >,modal-header is a class that defines a style for the head of a modal window.
(5) class= "Close" is a CSS class that is used to set the style for the closed button of the modal window.
(6) data-dismiss= "Modal" is a custom HTML5 data property. It is used to close the modal window here.
(7) class= "Modal-body" is a CSS class for Bootstrap CSS, which is used to set the style for the main body of modal windows.
(8) class= "Modal-footer" is a CSS class for Bootstrap CSS that is used to set the style for the bottom of modal windows.
(9) data-toggle= "Modal", HTML5 the custom data property Data-toggle is used to open modal windows.

0x02 JS Mode loading

In addition to the above through the loading of properties, you can also load the modal dialog by JS, the following is a simple implementation of the user login interface:

<! DOCTYPE html>  

The effect is as follows:

The above example contains the process of JS loading modal, and also includes setting modal dialog box width, responding to events, and so on. The modal method combines some parameters to achieve special effects:

(1) Activate the content as a modal frame. Accept an optional Option object:

$ ("#myModal"). Modal ({
keyboard:true,
})

(2) State switching

$ ("#myModal"). Modal (' toggle ')//open modal box manually.
$ ("#myModal"). Modal (' hide ')//Manually hide the modal box.

0X03 Events

The Bootstrap modal dialog box also defines the event, which is invoked by means of a "hook":

(1) Show.bs.modal
Triggered after calling the Show method:

$ (' #myModal '). On (' Show.bs.modal ', function () {
 //perform some actions ...
})

(2) Shown.bs.modal
Triggered when the modal box is visible to the user (waits for the CSS transition effect to complete):

$ (' #myModal '). On (' Shown.bs.modal ', function () {
//perform some actions ...
})

(3) Hide.bs.modal
Triggered when the Hide instance method is invoked:

$ (' #myModal '). On (' Hide.bs.modal ', function () {
 //perform some actions ...
})

(4) Hidden.bs.modal
Triggered when the modal box is completely hidden from the user:

$ (' #myModal '). On (' Hidden.bs.modal ', function () {
 //perform some actions ...
})

Above the user login example in the event section code:

$ ("#myModal"). On ("Hidden.bs.modal", function () {
  alert (' Test ');
 })

When the modal box is completely hidden from the user, the execution of this JS code is invoked.

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Plugin Usage Tutorial

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.