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


Posted in Javascript onAugust 18, 2015

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

Javascript 相关文章推荐
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
javascript实现控制文字大中小显示
Apr 28 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
详解node.js的http模块实例演示
Jul 12 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
vue动态绑定style样式
Apr 20 Vue.js
js+css实现上下翻页相册代码分享
Aug 18 #Javascript
javascript实现图片上传前台页面
Aug 18 #Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 #Javascript
jQuery实现的漂亮表单效果代码
Aug 18 #Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 #Javascript
You might like
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
让PHP支持断点续传的源码
2010/05/16 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
详解微信小程序 登录获取unionid
2017/06/27 Javascript
js定时器实现倒计时效果
2017/11/05 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
python3获取当前目录的实现方法
2019/07/29 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
解决django xadmin主题不显示和只显示bootstrap2的问题
2020/03/30 Python
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
酒店管理专业学生求职信
2013/09/27 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
重阳节标语大全
2014/10/07 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers