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. LDA-MySql

    http://blog.csdn.net/white_smile/article/details/19565701

  2. [UE4GamePlay架构（九）GameInstance（转）

    GameInstance这个类可以跨关卡存在,它不会因为切换关卡或者切换游戏模式而被销毁.然而,GameMode和PlayController就会再切换关卡或者游戏模式时被引擎销毁重置,这样他们里面的 ...

  3. GROUP BY关键字与WITH ROLLUP一起使用

    1 GROUP_CONCAT mysql> SELECT student_name, ->     GROUP_CONCAT(test_score) ->     FROM stud ...

  4. 自己写的jQuery放大镜插件效果(二)(采用只有一张图片的思路)

    废话不多说,先看效果图,和上一章节用的是同一个小图片: 这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多 插件代码: ; (fun ...

  5. Matlab2013a打开M文件乱码解决

    win10开发者英文版x64    Matlab2013a 解决方法:format改为chinese 

  6. ZooKeeper系列（3）命令操作 （转）

    原文地址:http://www.cnblogs.com/wuxl360/p/5817524.html 一.Zookeeper的四字命令 Zookeeper支持某些特定的四字命令字母与其的交互.他们大多 ...

  7. OpenACC 书上的范例代码（Jacobi 迭代），part 3

    ▶ 使用Jacobi 迭代求泊松方程的数值解 ● 使用 data 构件,强行要求 u0 仅拷入和拷出 GPU 各一次,u1 仅拷入GPU 一次 #include <stdio.h> #in ...

  8. 解决maven工程 子工程中的一些配置读取进来的问题

    方案:在父工程中手动配置一些节点 <build> <!-- 插件 --> <plugins> <plugin> <groupId>org.a ...

  9. leetcode350

    public class Solution { public int[] Intersect(int[] nums1, int[] nums2) { var len1 = nums1.Length; ...

  10. mysql 集群 数据同步

    mysql集群配置在网站负载均衡中是必不可少的: 首先说下我个人准备的负载均衡方式: 1.通过nginx方向代理来将服务器压力分散到各个服务器上: 2.每个服务器中代码逻辑一样: 3.通过使用redi ...