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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 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中其实也可以用方法链
2011/11/10 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
JS 巧妙获取剪贴板数据 Excel数据的粘贴
2009/07/09 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
jquery实现表单验证并阻止非法提交
2015/07/09 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
Python开发之pip安装及使用方法详解
2020/02/21 Python
用python计算文件的MD5值
2020/12/23 Python
python 通过exifread读取照片信息
2020/12/24 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
比驿:全球酒店比价网
2018/06/20 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
信息部岗位职责
2013/11/12 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
高中英语教学反思
2014/02/04 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
英语课外活动总结
2014/08/27 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
MySQL数据库如何使用Shell进行连接
2022/04/12 MySQL