Home > Developer > Web Develop
JS has alert,prompt and Confirm dialog box, but not very beautiful experience is not very good, with jquery can also be achieved,
Experience Effect: http://hovertree.com/texiao/jquery/34/
The code is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge,chrome=1"> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1"> <title>Cool jquery Dialog Plugin Gdialog-what to ask</title><BaseTarget= "_blank" /> <Linkhref= "Http://hovertree.com/texiao/jquery/34/css/normalize.css"rel= "stylesheet"type= "Text/css"> <Linkrel= "stylesheet"href= "Http://hovertree.com/texiao/jquery/34/css/animate.min.css"> <Linkrel= "stylesheet"href= "Http://hovertree.com/texiao/jquery/34/css/jquery.gDialog.css"> <style>Button{Border:0; }. Container{margin:50px Auto;Max-width:728px;text-align:Center;font-family:Arial; }. BTN{Background-color:#ED5565;Color:#fff;padding:20px;margin:10px 30px;Border-radius:5px;Border-bottom:3px Solid #DA4453; }a{Color:Darkslateblue;} </style></Head><Body> <Divstyle= "width:310px;margin:0px auto;"> <ahref= "http://hovertree.com/">Home</a> <ahref= "http://hovertree.com/texiao/">Effects</a> <ahref= "Http://hovertree.com/h/bjaf/4132lshc.htm">Original</a></Div> <Divclass= "Container"> <H1>JQuery Gdialog Plugin Exampels</H1> <Buttonclass= "Btn demo-1">Alert dialog box</Button> <Buttonclass= "Btn demo-2">Prompt dialog box</Button> <Buttonclass= "Btn demo-3">Prompt dialog box</Button> </Div> <Scriptsrc= "Http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></Script> <Scriptsrc= "Http://hovertree.com/texiao/jquery/34/js/jquery.gDialog.js"></Script> <Script> $('. Demo-1'). Click (function() {$.gdialog.alert ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse libero erat, scelerisque sit amet dolor nec, Euismod feugiat massa.", {title:"Alert dialog box by how to ask", Animatein:"Bouncein", Animateout:"Bounceout" }); }); $('. Demo-2'). Click (function() {$.gdialog.prompt ("Your website", "hovertree.com", {title:"prompt dialog box by how to ask", Required:true, Animatein:"RollIn", Animateout:"RollOut" }); }); $('. demo-3'). Click (function() {$.gdialog.confirm ("Is you sure?", {title:"Confirm dialog box by how to ask", Animatein:"Bounceindown", Animateout:"Bounceoutup" }); }); </Script></Body></HTML>
JS Title: http://hovertree.com/tiku/bjaf/k44bgls5.htm
Web Front end Rollup: http://www.cnblogs.com/jihua/p/webfront.html
Cool jquery dialog box plug-in Gdialog
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
