jquery SweetAlert插件实现响应式提示框
jquery弹出层插件，支持消息提示、错误提示、确认框提示等。交互体验度非常好，大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴，很符合大众的jquery插件使用方法。
先给大家演示效果：
<h1>SweetAlert</h1> <h2>AbeautifulreplacementforJavaScript's"Alert"</h2> <buttonclass="download">Download</button> <h3>So...Whatdoesitdo?</h3> <p>Here'sacomparisonofastandarderrormessage.Thefirstoneusesthebuilt-in<strong>alert</strong>-function,whilethesecondisusing<strong>sweetAlert</strong>.</p> <divclass="showcasenormal"> <h4>Normalalert</h4> <button>Showerrormessage</button> <h5>Code:</h5> <pre><spanclass="attr">alert</span>(<spanclass="str">"Oops...Somethingwentwrong!"</span>); </pre> <divclass="vs-icon"></div> </div> <divclass="showcasesweet"> <h4>SweetAlert</h4> <button>Showerrormessage</button> <h5>Code:</h5> <pre><spanclass="attr">sweetAlert</span>(<spanclass="str">"Oops..."</span>,<spanclass="str">"Somethingwentwrong!"</span>,<spanclass="str">"error"</span>);</pre> </div> <p>Prettycoolhuh?SweetAlertautomaticallycentersitselfonthepageandlooksgreatnomatterifyou'reusingadesktopcomputer,mobileortablet.It'sevenhighlycustomizeable,asyoucanseebelow!</p> <h3>Moreexamples</h3> <pclass="center">Intheseexamples,we'reusingtheshorthandfunction<strong>swal</strong>tocallsweetAlert.</p> <ulclass="examples"> <liclass="message"> <divclass="ui"> <p>Abasicmessage</p> <button>Tryme!</button> </div> <pre><spanclass="attr">swal</span>(<spanclass="str">"Here'samessage!"</span>)</pre> </li> <liclass="title-text"> <divclass="ui"> <p>Atitlewithatextunder</p> <button>Tryme!</button> </div> <pre><spanclass="attr">swal</span>(<spanclass="str">"Here'samessage!"</span>,<spanclass="str">"It'spretty,isn'tit?"</span>)</pre> </li> <liclass="success"> <divclass="ui"> <p>Asuccessmessage!</p> <button>Tryme!</button> </div> <pre><spanclass="attr">swal</span>(<spanclass="str">"Goodjob!"</span>,<spanclass="str">"Youclickedthebutton!"</span>,<spanclass="str">"success"</span>)</pre> </li> <liclass="warningconfirm"> <divclass="ui"> <p>Awarningmessage,withafunctionattachedtothe"Confirm"-button...</p> <button>Tryme!</button> </div>
以上就是本文通过代码给大家详解jquerySweetAlert插件实现响应式提示框，希望对大家有所帮助。