1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>SweetAlert2</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <!--标准mui.css-->
  10. <link rel="stylesheet" href="resource/css/mui.min.css">
  11. <link rel="stylesheet" href="resource/css/sweetalert2.min.css" />
  12. <script type="text/javascript" src="resource/js/sweetalert2.min.js"></script>
  13. <script type="text/javascript" src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>
  14. <script type="text/javascript" src="resource/js/jquery-2.1.1.min.js"></script>
  15. <style>
  16. .mui-content-padded {
  17. margin: 10px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="mui-content">
  23. <div class="mui-content-padded">
  24. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="base">基本信息框</button>
  25. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="success">成功提示框</button>
  26. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="error">错误提示框</button>
  27. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="warning">警告提示框</button>
  28. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="info">消息提示框</button>
  29. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="question">疑问提示框</button>
  30. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="autoclose">自动关闭对话框</button>
  31. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="design">自定义标签和按钮样式</button>
  32. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="function">按钮带回调事件</button>
  33. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="image">自定义图片</button>
  34. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="background">自定义背景弹出框</button>
  35. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="ajax">AJAX异步回调对话框</button>
  36. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="input">文本输入对话框</button>
  37. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="textarea">多行输入对话框</button>
  38. <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="select">下拉选择对话框</button>
  39. </div>
  40. </div>
  41. </body>
  42. <script src="resource/js/mui.min.js"></script>
  43. <script>
  44. mui.init({
  45. swipeBack: true //启用右滑关闭功能
  46. });
  47. </script>
  48. </html>
  49. <script type="text/javascript">
  50. $("#base").on("click", function() {
  51. swal({
  52. title: '温馨提示',
  53. text: "您好这是一个基本的信息提示框",
  54. confirmButtonText: '确认',
  55. confirmButtonColor: 'Green',
  56. })
  57. })
  58. $("#success").on("click", function() {
  59. swal({
  60. text: "信息已提交成功！",
  61. type: "success",
  62. confirmButtonText: '确认',
  63. confirmButtonColor: '#4cd964',
  64. })
  65. })
  66. $("#error").on("click", function() {
  67. swal({
  68. text: "对不起信息删除失败",
  69. type: "error",
  70. confirmButtonText: '确认',
  71. confirmButtonColor: '#f27474',
  72. })
  73. })
  74. $("#warning").on("click", function() {
  75. swal({
  76. text: "您好，信息正在提交中",
  77. type: "warning",
  78. confirmButtonText: '确认',
  79. confirmButtonColor: '#f8bb86',
  80. })
  81. })
  82. $("#info").on("click", function() {
  83. swal({
  84. text: "您好，信息正在提交中",
  85. type: "info",
  86. confirmButtonText: '确认',
  87. confirmButtonColor: '#3fc3ee',
  88. })
  89. })
  90. $("#question").on("click", function() {
  91. swal({
  92. text: "您还没有关注我们？",
  93. type: "question",
  94. confirmButtonText: '确认',
  95. confirmButtonColor: '#c9dae1',
  96. })
  97. })
  98. $("#autoclose").on("click", function() {
  99. swal({
  100. title: "自动关闭",
  101. text: "将在三秒钟自动关闭该对话框？",
  102. showConfirmButton: false,
  103. timer: 3000
  104. })
  105. })
  106. $("#design").on("click", function() {
  107. swal({
  108. title: '<h2 style="font-weight:bold;color:red">温馨提示</h2>',
  109. type: 'info',
  110. html: '<a href="http://www.baidu.com" style="color:green">自定义的html内容</a>',
  111. showCloseButton: true,
  112. showCancelButton: true,
  113. confirmButtonColor: 'gray',
  114. cancelButtonColor: '#3fc3ee',
  115. confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',
  116. cancelButtonText: ' <i  class="mui-icon mui-icon-trash"></i>确认'
  117. })
  118. })
  119. $("#function").on("click", function() {
  120. swal({
  121. text: "您还没有关注我们，建议先关注?",
  122. type: 'warning',
  123. showCancelButton: true,
  124. confirmButtonColor: '#f8bb86',
  125. cancelButtonColor: 'gray',
  126. cancelButtonText: '取消',
  127. reverseButtons: true, //控制按钮反转
  128. confirmButtonText: '立即关注',
  129. }).then(function(isConfirm) {
  130. if(!isConfirm) {
  131. swal({
  132. text: "取消了！",
  133. type: "error",
  134. confirmButtonText: '确认',
  135. confirmButtonColor: '#f27474',
  136. })
  137. } else {
  138. swal({
  139. text: "已成功关注！",
  140. type: "success",
  141. confirmButtonText: '确认',
  142. confirmButtonColor: '#4cd964',
  143. })
  144. }
  145. })
  146. })
  147. $("#image").on("click", function() {
  148. swal({
  149. title: '图片',
  150. text: '这是一个自定义的图片',
  151. imageUrl: 'http://wx.qlogo.cn/mmopen/Fsf6yHxNrcNbzCmUnjlkice1HviaicNN3y0MbH19JIGc4I3RfgJBiaUTHNefF1xs0QpKl6aRJ7A2PW1N4KiaDBeeINQ/0',
  152. imageWidth: 280,
  153. imageHeight: 280,
  154. animation: true, //控制是否有动画
  155. confirmButtonText: '夏守成真他妈帅',
  156. confirmButtonColor: '#4cd964',
  157. })
  158. })
  159. $("#background").on("click", function() {
  160. swal({
  161. title: '<h3 style="color:white">这是一个自定义的背景弹出框</h3>',
  162. width: 600,
  163. padding: 100,
  164. background: '#fff url(http://img2.3lian.com/2014/f5/172/d/31.jpg)',
  165. showConfirmButton: false,
  166. })
  167. })
  168. $("#ajax").on("click", function() {
  169. swal({
  170. title: '输入您的姓名',
  171. input: 'text',
  172. confirmButtonText: '提交',
  173. confirmButtonColor: '#4cd964',
  174. showLoaderOnConfirm: true, //加载按钮是否可见
  175. preConfirm: function() {
  176. return new Promise(function(resolve) {
  177. setTimeout(function() {
  178. resolve();
  179. }, 5000);
  180. });
  181. },
  182. allowOutsideClick: false //弹框外是否可点
  183. }).then(function(res) {
  184. if(res) {
  185. //实际使用过程中将此处换成ajax代码即可
  186. swal({
  187. type: 'success',
  188. title: 'Ajax 请求完成',
  189. html: '您的邮箱是: ' + '<strong>' + res + '</strong>',
  190. confirmButtonText: '确定',
  191. confirmButtonColor: '#4cd964'
  192. });
  193. }
  194. });
  195. });
  196. $("#input").on("click", function() {
  197. swal({
  198. title: '请输入您的姓名',
  199. input: 'text',
  200. confirmButtonText: '确定',
  201. confirmButtonColor: '#4cd964',
  202. inputValidator: function(value) {
  203. return new Promise(function(resolve, reject) {
  204. if(value) {
  205. resolve();
  206. } else {
  207. reject('至少要输入一个值哦！');
  208. }
  209. });
  210. }
  211. }).then(function(result) {
  212. if(result) {
  213. swal({
  214. title: '结果通知',
  215. text: '您的名字是: <strong>' + result + '</strong>',
  216. confirmButtonText: '确定',
  217. confirmButtonColor: '#4cd964'
  218. });
  219. }
  220. });
  221. })
  222. $("#textarea").on("click", function() {
  223. swal({
  224. input: 'textarea',
  225. confirmButtonText: '确定',
  226. confirmButtonColor: '#4cd964'
  227. }).then(function(result) {
  228. if(result) {
  229. swal({
  230. title: '结果通知',
  231. text: '您输入的是: <strong>' + result + '</strong>',
  232. confirmButtonText: '确定',
  233. confirmButtonColor: '#4cd964'
  234. });
  235. }
  236. });
  237. })
  238. $("#select").on("click", function() {
  239. swal({
  240. title: '请选择您的姓名',
  241. input: 'select',
  242. inputOptions: {
  243. 'xsc': '夏守成',
  244. 'ylj': '杨林静',
  245. 'William': 'William'
  246. },
  247. inputPlaceholder: '选择你的名字',
  248. showCancelButton: true,
  249. confirmButtonText: '确定',
  250. confirmButtonColor: '#4cd964',
  251. preConfirm: function() {
  252. return new Promise(function(resolve) {
  253. resolve(["杨林静"]);
  254. });
  255. }
  256. }).then(function(result) {
  257. if(result) {
  258. swal({
  259. type: 'success',
  260. html: '你选择的是: <strong>' + result[0] + '</strong>',
  261. confirmButtonText: '确定',
  262. confirmButtonColor: '#4cd964'
  263. });
  264. }
  265. });
  266. })
  267. </script>

如上图所示，利用Sweet Alert可以制作很多非常好的弹窗提醒效果，如下所示：

源代码下载地址：http://download.csdn.net/detail/u013059555/9722384

SweetAlert2 弹窗的更多相关文章

  1. vue使用sweetalert2弹窗插件

    1). 安装 sweetalert2 npm install sweetalert2@7.15.1 --save 2). 封装 sweetalert2 在 src 新建 plugins 文件夹,然后新 ...

  2. sweetAlert2

    SweetAlert2一个前端最好用的弹窗

  3. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  4. jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗

    一.原生JavaScript编写弹窗 二.jQuery编写弹窗 知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...

  5. Android重构与设计之路，从整理提示弹窗（SmartAlertPop）开始

    封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...

  6. JavaScript弹窗

    警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...

  7. yii2 modal弹窗之ActiveForm ajax表单异步验证

    作者:白狼 出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...

  8. yii2中如何使用modal弹窗之基本使用

    作者:白狼 出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...

  9. 多功能弹窗控件layer

    开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等 这里会推荐几个常用的js插件,丰富多样简单易移 ...

随机推荐

  1. python3 tkinter

    https://morvanzhou.github.io/tutorials/python-basic/tkinter/ 李导师推荐的.非常感谢.非常棒的视频教程!!! 只不过里面的教程视频是yout ...

  2. [UE4]Selector和Sequence的区别

    Selector和Sequence子节点都是返回true才会执行下一个子节点. Sequence是从左到右依次执行,左边节点如果返回false,则不会执行右边的节点 Selector会同步执行所有子节 ...

  3. FDD vs TDD

    双工方式 FDD vs TDD  频分双工(FDD) 收发信各占用一个频率. 优点是收.发信号同时进行,时延小,技术成熟,缺点是设备成本高.  时分双工(TDD) 收发信使用同一个频率,但使用不同 ...

  4. Hive基础之Hive的复杂类型

    ARRAY 一组有序字段,字段的类型必须相同.Array(1,2) create table hive_array(ip string, uid array<string>) row fo ...

  5. storm的流分组

    用的是ShuffleGrouping分组方式,并行度设置为3 这是跑下来的结果 参考代码StormTopologyShufferGrouping.java package yehua.storm; i ...

  6. java字符串分解 StringTokenizer用法

    Java中substring方法可以分解字符串,返回的是原字符串的一个子字符串.如果要讲一个字符串分解为一个一个的单词或者标记,StringTokenizer可以帮你. 先看个例子: 1 public ...

  7. 学习MongoDB 四： MongoDB查询（一）

    一.简介 MongoDB提供了db.collection.find() 方法可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段. 二．db.collection.fi ...

  8. redis实现分布式锁 转自importnew 记录一下

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  9. PYTHON实现识别图片

    自学Python3第5天,今天突发奇想,想用Python识别图片里的文字.没想到Python实现图片文字识别这么简单,只需要一行代码就能搞定 #作者微信:2501902696 from PIL imp ...

  10. 数据库之Mysql高级

    简介 实体与实体之间有3种对应关系,这些关系也需要存储下来 在开发中需要对存储的数据进行一些处理,用到内置的一些函数 视图用于完成查询语句的封装 事务可以保证复杂的增删改操作有效 关系 创建成绩表sc ...