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. 1115 Counting Nodes in a BST （30 分）

    1115 Counting Nodes in a BST (30 分) A Binary Search Tree (BST) is recursively defined as a binary tr ...

  2. ESXI 5.5加载 zabbix OVF 3.2.6操作

    如果是虚拟机安装ZABBIX,ZABBIX的前台WEB时间,是由虚拟机的BIOS时间决定的. 一. 1.去官方下载vmdk磁盘镜像 链接地址为https://sourceforge.net/proje ...

  3. linux 添加secondary ip

    linux下ip地址除了primary外,还有两种:1. ip alias(子接口)2. secondary ip(辅助ip) 都可在一块物理网卡上添加,alias由ifconfig添加,ifconf ...

  4. xgboost的遗传算法调参

    遗传算法适应度的选择: 机器学习的适应度可以是任何性能指标 —准确度,精确度,召回率,F1分数等等.根据适应度值,我们选择表现最佳的父母(“适者生存”),作为幸存的种群. 交配: 存活下来的群体中的父 ...

  5. android 系统架构简介

    Android系统采取的是分层的架构,根据官方文档提供的架构图,我们将android的系统架构分成5层,如图: 1.Application Framework (应用框架) application f ...

  6. php内存回收机制的学习

    今天朋友去面试,回来问了一下怎么样,结果他说一脸懵逼,看来我们平时还是学习的太少了啊.于是比较好奇,果断问了一下都有哪些问题,朋友说第一个问题就是“描述PHP的垃圾回收机制”,我当时听了也是一脸茫然, ...

  7. Sum All Numbers in a Range(两数之间数字总和）

    题目:我们会传递给你一个包含两个数字的数组.返回这两个数字和它们之间所有数字的和. 最小的数字并非总在最前面. /*方法一: 公式法 (首+末)*项数/2 */ /*两个数比较大小的函数*/ func ...

  8. Dark theme for Texstudio - TeX - LaTeX

    Dark theme for Texstudio ~~~  1.window系统如下操作 ~~~ 1. texstudio的配置文件texstudio 的配置文件在~/.config/texstudi ...

  9. leetcode83

    /** * Definition for singly-linked list. * public class ListNode { * public int val; * public ListNo ...

  10. Eclipse在线安装STS插件

    转自:https://blog.csdn.net/weixin_41987553/article/details/81091280 spring Boot是由Pivotal团队提供的全新框架,其设计目 ...