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. 阿里云上部署tomcat启动后，通过http不能访问

    原因是因为阿里为了安全设置了安全组策略,必须我们授权的端口,其他计算机才能通过http访问 设置流程: 点击安全组 再点击:配置规则 然后点击:添加安全组规则 开始配置:划红线的必写,授权对象:0.0 ...

  2. java单机操作redis3.2.10和集群操作增删改查

    先直接附上单机版的连接和增删改查,7000-7005是端口号 package com.yilian.util; import java.util.HashMap; import java.util.I ...

  3. numpy的shuffle函数

    import numpy as np from numpy.random import shuffle import pandas as pd df = pd.DataFrame([[1,2,3],[ ...

  4. 如何捕捉@tornado.gen.coroutine里的异常

    from tornado import gen from tornado.ioloop import IOLoop @gen.coroutine def throw(a,b): try: a/b ra ...

  5. RNN总结

    RNN既可以表述为循环神 经网络(recurrent neural network),也可以表述为递归神经网络(recursive neural network),前者一般用于处理以时间序列为输入的问 ...

  6. javascript节点操作replaceChild()

    replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点 var oDiv = document.getElementById("guoD ...

  7. trigger和triggerHandler的使用

    今天琢磨了好久这个trigger和triggerHandler的用法.在网上搜了好多,不过大都是相互抄袭,毛意思都没有.后来自己做了研究. trigger: 1.可以用来触发事件. <input ...

  8. Oracle 学习SQL

    开始记录最近学习了一些基础的SQL知识. 说起数据库,想到当时学习数据库概论这本书的时候,就学了一些基本的SQL语句以及数据库理论知识,记得最当时考试的数据库范式的知识,不知当时是怎么过来的,到现在对 ...

  9. mysql5.5版本以后插入中午显示问号的解决办法

    先看看中午变问号的结果 现在看看我们建立数据库和建表的操作 看到这里相信大家都知道创建成功了,没错,数据库跟表是创建成功了,可当你录入的信息带中文的时候就显示问号. 现在用传统的解决办法 在查看下表的 ...

  10. 使用for...of 优点，代替for...in，ｆｏｒＥａｃｈ和ｆｏｒ循环

    来自阮一峰ES6标准: http://es6.ruanyifeng.com/#docs/iterator