Home > Developer > Web Develop
Custombox.js, JQuery, pop-up box
Summary: Recently in the jquery plugin's official website saw a very fun jquery plugin (custombox), a very light and useful pop-up box. Here's a recap:
Directly on the code:
<!DOCTYPE HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <title>Framelayer</title> <Scriptsrc= "/framelayer/js/jquery-1.8.0.min.js"></Script> <Scriptsrc= "/framelayer/js/custombox.js"></Script> <Scriptsrc= "/framelayer/js/legacy.js"></Script> <Linkhref= "/framelayer/css/bootstrap.min.css"rel= "stylesheet" /> <Linkhref= "/framelayer/css/custombox.min.css"rel= "stylesheet" /> <Linkhref= "/framelayer/css/demo.css"rel= "stylesheet" /> <Script> $(function () { $('#element'). On ('Click', function(e) {Custombox.open ({target:'#modal', Effect:'Fadein' }); E.preventdefault (); }); }); </Script></Head><Body> <inputtype= "button"value= "ClickMe"ID= "Element" /></Body></HTML><DivID= "Modal"class= "Modal-demo"> <Buttontype= "button"class= "Close"onclick= "custombox.close ();"> <span>×</span><spanclass= "Sr-only"></span> </Button> <h4class= "title">Modal Title</h4> <Divclass= "text">Content</Div></Div>
Effect:
Ajax Support:
To modify the target property:
<script> $ (function () { $ (function (e) { Custombox.open ({ //target: ' #modal ', target: '/ajaxhandler.html ', ' Fadein ' }); E.preventdefault (); } ); </script>Add a new ajaxhandler.html file:
<DivID= "Modal"class= "Modal-demo"style= "Display:block;"> <Buttontype= "button"class= "Close"onclick= "custombox.close ();"> <span>×</span><spanclass= "Sr-only"></span> </Button> <h4class= "title">Modal Title</h4> <Divclass= "text">contentbyhtml</Div></Div>
Implement Ajax through. ASHX:
<script> $ (function () { $ (function (e) { Custombox.open ({ //target: ' #modal ', //target: '/ajaxhandler.html ', target: '/ajaxhandler.ashx ', ' Fadein ' }); E.preventdefault (); } ); </script>Ajaxhandler.ashx file:
Public void ProcessRequest (HttpContext context) { string"<div id= ' modal ' class= ' Modal-demo ' style= ' display:block; ' ><button type= ' button ' class= ' Close ' onclick= ' custombox.close (); ' ><span>×</span><span class= ' sr-only ' ></span></button> ' ; Context. Response.Write (value); }
With the effect property you can achieve a lot of pop-up effects.
For example, the code can be modified as follows:
Callback Event Events:
1.open ()
2.Complete ()
3.Close ()
For more information, please crossing the net, this is here.
END
The custombox.js of the jquery extension
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
