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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
杨氏矩阵查找的JS代码
2013/03/21 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
2016/06/06 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
pycharm实现猜数游戏
2020/12/07 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
怎么写好自荐信
2013/10/30 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
演讲开场白和结束语
2015/05/29 职场文书
员工聘用合同范本
2015/09/21 职场文书