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

前端技术 2023/09/05 JavaScript

jquery弹出层插件，支持消息提示、错误提示、确认框提示等。交互体验度非常好，大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴，很符合大众的jquery插件使用方法。

先给大家演示效果：

在线预览    源码下载

代码如下：

<h1>Sweet Alert</h1>
<h2>A beautiful replacement for JavaScript\'s \"Alert\"</h2>
<button class=\"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>
<div class=\"showcase normal\">
<h4>Normal alert</h4>
<button>Show error message</button>
<h5>Code:</h5>
<pre><span class=\"attr\">alert</span>(<span class=\"str\">\"Oops... Something went wrong!\"</span>);
 </pre>
<div class=\"vs-icon\"></div>
</div>
<div class=\"showcase sweet\">
<h4>Sweet Alert</h4>
<button>Show error message</button>
<h5>Code:</h5>
<pre><span class=\"attr\">sweetAlert</span>(<span class=\"str\">\"Oops...\"</span>, <span class=\"str\">\"Something went wrong!\"</span>, <span class=\"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>
<p class=\"center\">In these examples, we\'re using the shorthand function <strong>swal</strong> to call sweetAlert.</p>
<ul class=\"examples\">
<li class=\"message\">
<div class=\"ui\">
<p>A basic message</p>
<button>Try me!</button>
</div>
<pre><span class=\"attr\">swal</span>(<span class=\"str\">\"Here\'s a message!\"</span>)</pre>
</li>
<li class=\"title-text\">
<div class=\"ui\">
<p>A title with a text under</p>
<button>Try me!</button>
</div>
<pre><span class=\"attr\">swal</span>(<span class=\"str\">\"Here\'s a message!\"</span>, <span class=\"str\">\"It\'s pretty, isn\'t it?\"</span>)</pre>
</li>
<li class=\"success\">
<div class=\"ui\">
<p>A success message!</p>
<button>Try me!</button>
</div>
<pre><span class=\"attr\">swal</span>(<span class=\"str\">\"Good job!\"</span>, <span class=\"str\">\"You clicked the button!\"</span>, <span class=\"str\">\"success\"</span>)</pre>
</li>
<li class=\"warning confirm\">
<div class=\"ui\">
<p>A warning message, with a function attached to the \"Confirm\"-button...</p>
<button>Try me!</button>
</div>

以上就是本文通过代码给大家详解jquery SweetAlert插件实现响应式提示框，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/14590

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案