Some of Bootstrap's notes--modal

Source: Internet
Author: User

Modal is a "window component" provided by Bootstrap, which can be used to implement the effect of popup window with JS.

The class of modal is "modal", which must contain three div parts, and the attributes are asked Modal-header,modal-body,modal-footer respectively.

Modal can also be used to place a registration form, as in the following example:

<section> <div class= "Row" > <div class= "span12" > <form class= "modal form-horizontal" method= "PO St "action=" http://localhost "> <div class=" Modal-header ">  

If we take advantage of the modal plug-in provided by Bootstrap, you can create a click-pop floating window effect.

This requires the modal div to have the properties hide and fade, specifying the ID. And the beginning of the stype is display:none to hide at the same time also need a button to control the popup, this button must have data-toggle= "modal" element, Href=modal ID.

If you want to include the Close button in the pop-up form, you need to have the button with the data-dismiss= "modal" property. This transformation completes the page code:

<section> <a data-toggle= "modal" href= "#regModal" class= "btn btn-primary" >show!</a> <div class= " Row "> <form id=" regmodal "class=" Modal Hide Fade Form-horizontal "method=" post "action=" http://localhost "style=" Display:none "> <div class=" Modal-header "> Of course, since this thing using JS, can also be opened with JS. A word ⋯⋯$ ("#regModal"). Modal ()

———— personally think the JS way to open better, easy to modify ... anyway, it is necessary to install JQ. I don't care about the craved code amount.

At the same time modal this plugin provides a series of events and so on ... Not much to say ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.