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 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
angularJS提交表单(form)
Feb 09 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
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
php微信开发之关注事件
2018/06/14 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python单元和文档测试实例详解
2019/04/11 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
荷兰本土平价百货:HEMA
2017/10/23 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
大客户销售经理职责
2013/12/04 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
相亲活动方案
2014/08/26 职场文书
工程承包协议书
2014/10/20 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
实战 快速定位MySQL的慢SQL
2022/03/22 MySQL
css3 选择器
2022/05/11 HTML / CSS