Basically, the bootstrap-alert component works on CSS. The JS component is a close event. This is a close event provided by the Framework. Before that, you can bind the close and closed callbacks through the On method. It will be called when it is closed. Basically, you only need to introduce the JS file, and HTML can be written according to its format requirements.
Note the following:
! Function ($) {"use strict"; // jshint ;_; /* alert class definition * ===============================* // This is Program Member-style name var dismiss = '[data-dismiss = "alert"]', Alert = function (EL) {$ (EL ). on ('click', dismiss, this. close)} // The most required method alert. prototype. close = function (e) {// get the DOM corresponding to this control // use the following three methods: // 1 data-target custom attribute // hash in the attribute of 2 href (mostly simple ID selector or class selector ), // 3 direct parent node var $ this = $ (this), selector = $ this. ATTR ('data-target'), $ parent if (! Selector) {selector = $ this. ATTR ('href ') selector = selector & selector. Replace (/.*(? = # [^ \ S] * $)/, '') // strip for IE7} $ parent = $ (selector) E & E. preventdefault () $ parent. length | ($ parent = $ this. hasclass ('alert ')? $ This: $ this. parent () $ parent. trigger (E = $. event ('close') // trigger close custom event if (E. isdefaultprevented () return // triggers the fade Effect of css3. It must be combined with the fade class name to use $ parent. removeclass ('in') function removeelement () {$ parent. trigger ('closed '). remove () // trigger the closed custom event after the removal} $. support. transition & $ parent. hasclass ('fade ')? $ Parent. on ($. support. transition. end, removeelement): removeelement ()} /* alert plugin definition * =================================*/var old =old. FN. alert $. FN. alert = function (option) {return this. each (function () {var $ this = $ (this), data = $ this. data ('alert ') // reuse instance if (! Data) $ this. data ('alert ', (Data = new alert (this) // based on the current alert instance prototype, this option can only be close if (typeof option = 'string') data [Option]. call ($ this)} $. FN. alert. constructor = alert/* alert no conflict * =========================*/$. FN. alert. noconflict = function () {$. FN. alert = old return this}/* alert DATA-API * ===================== * // bind the Close event $ (document ). on ('click. alert. data-API ', dismiss, alert. prototype. close)} (window. jquery );
the shape of the alert component is determined by the following group of class names. First, alert is required. Alert-block determines whether there are multiple lines in it. There is also a decision on skin. There are only three types of skin: Alert-success, alert-danger, alert-info
</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> Bootstrap learning by situ zhengmei </title> <br/> <meta HTTP -equiv = "Content-Type" content = "text/html; charset = UTF-8 "> </P> <p> <LINK rel =" stylesheet "href =" http://files.cnblogs.com/rubylouvre/bootstrap.css "/> <br/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/jquery1.83.js "> </ SCRIPT> <br/> <SCRIPT src = "http://files.cnblogs.com/rubylouvre/bootstrap-transition. JS "> </SCRIPT> <br/> <SCRIPT src =" http://files.cnblogs.com/rubylouvre/bootstrap-alert.js "> </SCRIPT> </P> <p> <SCRIPT> <br/> $ (Function () {<br/> // Note: events must be bound to the UI container, rather than the close button. <br/> $ (". alert-block "). on ("close", function () {<br/> alert ("called before closing") <br/>}) <br/> $ (". alert-block "). on ("closed", function () {<br/> alert ("this is called after being disabled") <br/>}) <br/> }) </P> <p> </SCRIPT> <br/> </pead> <br/> <body> <br/> <Div class =" Lert fade in "> <br/> <button type =" button "class =" close "data-dismiss =" alert "> × </button> <br/> <strong> Holy guacamole! </Strong> best check yo self, you're not looking too good. <br/> </div> <br/> <Div class = "alert-success fade in"> <br/> <button type = "button" class = "close "data-dismiss =" alert "> × </button> <br/> <strong> Holy guacamole! </Strong> best check yo self, you're not looking too good. <br/> </div> <br/> <Div class = "alert-block alert-error fade in"> <br/> <button type = "button" Class = "close" data-dismiss = "alert"> × </button> <br/> <H4 class = "alert-heading"> oh snap! You got an error! </H4> <br/> <p> change this and that and try again. DUIs mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia Odio sem nec elit. CRAs Mattis consectetur Purus sit Amet fermentum. </P> <br/> <p> <br/> <a class = "BTN-danger" href = "#"> take this action </a> <class = "BTN" id = "close" data-dismiss = "alert" href = ". alert-block "> or do this </a> <br/> </P> <br/> </div> <br/> </body> <br/> </ptml> <br/>
RunCode
The following is its less.
/// Alerts // ------------------------------------------------------ // base styles //-------------------------. alert {padding: 8px 35px 8px 14px; margin-bottom: @ baselineheight; text-Shadow: 0 1px 0 rgba (255,255,255 ,. 5); background-color: @ warningbackground; Border: 1px solid @ warningborder ;. border-radius (@ baseborderradius );}. alert ,. alert H4 {// specified for the H4 to prevent conflicts of changing @ headingscolor color: @ warningtext ;}. alert H4 {margin: 0;} // adjust close link position. alert. close {position: relative; top:-2px; Right:-21px; line-Height: @ baselineheight;} // alternate styles //-------------------------. alert-success {background-color: @ succ1_ackground; border-color: @ succ1_order; color: @ successtext ;}. alert-success H4 {color: @ successtext ;}. alert-danger ,. alert-error {background-color: @ errorbackground; border-color: @ errorborder; color: @ errortext ;}. alert-Danger H4 ,. alert-error H4 {color: @ errortext ;}. alert-Info {background-color: @ infobackground; border-color: @ infoborder; color: @ infotext ;}. alert-Info H4 {color: @ infotext;} // block alerts //-------------------------. alert-block {padding-top: 14px; padding-bottom: 14px ;}. alert-block> P ,. alert-block> ul {margin-bottom: 0 ;}. alert-block P + P {margin-top: 5px ;}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
