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. Mysql 於lampp xampp LinuxUbuntu下的配置

    默认执行Lampp/Xampp 於Ubuntu下完成后,需要对mysql进行一系列的配置,方可进行更好的操作 lampp下的mysql配置文件路径: /opt/lampp/etc/my.cnf 1 配 ...

  2. oletools下载安装及rtfobj使用

    rtf内嵌对象分析提取工具rtfobj是oletools的一部分 oletools各个版本下载地址https://bitbucket.org/decalage/oletools/downloads/ ...

  3. 【BZOJ】1257: [CQOI2007]余数之和（除法分块）

    题目 传送门:QWQ 分析 大佬和我说本题是除法分块,莫比乌斯反演中也有用到. QwQ我不会莫比乌斯反演啊~ 题目让我们求  $ \sum_{i=1}^n  k\mod n $ 然后根据$ a \mo ...

  4. 【Linux_Unix系统编程】Chapter4 文件IO

    Chapter4 文件IO 4.1 概述 文件描述符 == Windows的句柄 标准文件描述符: 0 标准输入 STDIN_FILENO stdin 1 标准输出 STDOUT_FILENO std ...

  5. KVM虚拟机网络闪断分析

    https://www.cnblogs.com/Bozh/p/5484838.html 背景 公司云平台的机器时常会发生网络闪断,通常在10s-100s之间. 异常情况 VM出现问题时,表现出来的情况 ...

  6. metaq架构原理

      原创文章,转载请注明出处:http://jameswxx.iteye.com/blog/2034111 本来只是想看下metaq的文档,结果发现好乱,现在metaq其实有两个大分支了,一个是庄晓丹 ...

  7. docker使用笔记1

    rhel6安装 yum -y install docker-io ################################################ 进入容器命令 docker exec ...

  8. DDoS攻防战 （二） ：CC攻击工具实现与防御理论

    故上兵伐谋 其次伐交 其次伐兵 其下攻城 攻城之法 为不得已 知己知彼 百战不殆 不知彼而知己 一胜一负 不知彼不知己 每战必败 ——孙子兵法·谋攻 我们将要实现一个进行应用层DDoS攻击的工具,综合 ...

  9. 可视化库-seaborn-Facetgrid(第五天)

    1. sns.Facetgrid 画一个基本的直方图 import numpy as np import pandas as pd from scipy import stats, integrate ...

  10. mybatis 常用jdbcType数据类型

    来自 : http://blog.csdn.net/paincupid/article/details/50922981