微客导航 » 文章资讯 » jquery SweetAlert插件实现响应式提示框

jquery SweetAlert插件实现响应式提示框

2024-03-28 07:08:02 388

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插件实现响应式提示框，希望对大家有所帮助。

返回顶部
3162201930
czq8825@qq.com

jquery SweetAlert插件实现响应式提示框

热门推荐

随机推荐