基于jquery的响应式提示框SweetAlert

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: |||超大  

介绍款交互性非常不错的jquery弹出层插件,支持消息提示、错误提示、确认框提示等。交互式体验感非常不错,比如咱们现在体验非常不错的微信支付、支付宝等完成后的效果。不过本插件至少支持IE9+。使用方式也特别简单、粗暴,符合大众的jquery插件使用方法。

在线预览 源码下载

<h1>Sweet Alert</h1><h2>A beautiful replacement forjavaScript's "Alert"</h2><buttonclass="download">Download</button><h3>So... What does it do?</h3><p>Here’s a comparison of a standard error message. The first one uses the built-in<strong>alert</strong>-function, while the second is using<strong>sweetAlert</strong>.</p><divclass="showcase normal"><h4>Normal alert</h4><button>Show error message</button><h5>Code:</h5><PRe><spanclass="attr">alert</span>(<spanclass="str">"Oops... Something went wrong!"</span>);</pre><divclass="vs-icon"></div></div><divclass="showcase sweet"><h4>Sweet Alert</h4><button>Show error message</button><h5>Code:</h5><pre><spanclass="attr">sweetAlert</span>(<spanclass="str">"Oops..."</span>,<spanclass="str">"Something went wrong!"</span>,<spanclass="str">"error"</span>);</pre></div><p>Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p><h3>More examples</h3><pclass="center">In these examples, we're using the shorthand function<strong>swal</strong>to call sweetAlert.</p><ulclass="examples"><liclass="message"><divclass="ui"><p>A basic message</p><button>Try me!</button></div><pre><spanclass="attr">swal</span>(<spanclass="str">"Here's a message!"</span>)</pre></li><liclass="title-text"><divclass="ui"><p>A title with a text under</p><button>Try me!</button></div><pre><spanclass="attr">swal</span>(<spanclass="str">"Here's a message!"</span>,<spanclass="str">"It's pretty, isn't it?"</span>)</pre></li><liclass="success"><divclass="ui"><p>A success message!</p><button>Try me!</button></div><pre><spanclass="attr">swal</span>(<spanclass="str">"Good job!"</span>,<spanclass="str">"You clicked the button!"</span>,<spanclass="str">"success"</span>)</pre></li><liclass="warning confirm"><divclass="ui"><p>A warning message, with a function attached to the "Confirm"-button...</p><button>Try me!</button></div>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航