SweetAlert2 弹窗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SweetAlert2</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="resource/css/mui.min.css">
<link rel="stylesheet" href="resource/css/sweetalert2.min.css" />
<script type="text/javascript" src="resource/js/sweetalert2.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>
<script type="text/javascript" src="resource/js/jquery-2.1.1.min.js"></script>
<style>
.mui-content-padded {
margin: 10px;
}
</style>
</head>
<body>
<div class="mui-content">
<div class="mui-content-padded">
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="base">基本信息框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="success">成功提示框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="error">错误提示框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="warning">警告提示框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="info">消息提示框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="question">疑问提示框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="autoclose">自动关闭对话框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="design">自定义标签和按钮样式</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="function">按钮带回调事件</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="image">自定义图片</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="background">自定义背景弹出框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="ajax">AJAX异步回调对话框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="input">文本输入对话框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="textarea">多行输入对话框</button>
<button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-success" id="select">下拉选择对话框</button>
</div>
</div>
</body>
<script src="resource/js/mui.min.js"></script>
<script>
mui.init({
swipeBack: true //启用右滑关闭功能
});
</script>
</html>
<script type="text/javascript">
$("#base").on("click", function() {
swal({
title: '温馨提示',
text: "您好这是一个基本的信息提示框",
confirmButtonText: '确认',
confirmButtonColor: 'Green',
})
})
$("#success").on("click", function() {
swal({
text: "信息已提交成功！",
type: "success",
confirmButtonText: '确认',
confirmButtonColor: '#4cd964',
})
})
$("#error").on("click", function() {
swal({
text: "对不起信息删除失败",
type: "error",
confirmButtonText: '确认',
confirmButtonColor: '#f27474',
})
})
$("#warning").on("click", function() {
swal({
text: "您好，信息正在提交中",
type: "warning",
confirmButtonText: '确认',
confirmButtonColor: '#f8bb86',
})
})
$("#info").on("click", function() {
swal({
text: "您好，信息正在提交中",
type: "info",
confirmButtonText: '确认',
confirmButtonColor: '#3fc3ee',
})
})
$("#question").on("click", function() {
swal({
text: "您还没有关注我们？",
type: "question",
confirmButtonText: '确认',
confirmButtonColor: '#c9dae1',
})
})
$("#autoclose").on("click", function() {
swal({
title: "自动关闭",
text: "将在三秒钟自动关闭该对话框？",
showConfirmButton: false,
timer: 3000
})
})
$("#design").on("click", function() {
swal({
title: '<h2 style="font-weight:bold;color:red">温馨提示</h2>',
type: 'info',
html: '<a href="http://www.baidu.com" style="color:green">自定义的html内容</a>',
showCloseButton: true,
showCancelButton: true,
confirmButtonColor: 'gray',
cancelButtonColor: '#3fc3ee',
confirmButtonText: ' <i class="mui-icon mui-icon-refresh"></i>取消',
cancelButtonText: ' <i class="mui-icon mui-icon-trash"></i>确认'
})
})
$("#function").on("click", function() {
swal({
text: "您还没有关注我们，建议先关注?",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#f8bb86',
cancelButtonColor: 'gray',
cancelButtonText: '取消',
reverseButtons: true, //控制按钮反转
confirmButtonText: '立即关注',
}).then(function(isConfirm) {
if(!isConfirm) {
swal({
text: "取消了！",
type: "error",
confirmButtonText: '确认',
confirmButtonColor: '#f27474',
})
} else {
swal({
text: "已成功关注！",
type: "success",
confirmButtonText: '确认',
confirmButtonColor: '#4cd964',
})
}
})
})
$("#image").on("click", function() {
swal({
title: '图片',
text: '这是一个自定义的图片',
imageUrl: 'http://wx.qlogo.cn/mmopen/Fsf6yHxNrcNbzCmUnjlkice1HviaicNN3y0MbH19JIGc4I3RfgJBiaUTHNefF1xs0QpKl6aRJ7A2PW1N4KiaDBeeINQ/0',
imageWidth: 280,
imageHeight: 280,
animation: true, //控制是否有动画
confirmButtonText: '夏守成真他妈帅',
confirmButtonColor: '#4cd964',
})
})
$("#background").on("click", function() {
swal({
title: '<h3 style="color:white">这是一个自定义的背景弹出框</h3>',
width: 600,
padding: 100,
background: '#fff url(http://img2.3lian.com/2014/f5/172/d/31.jpg)',
showConfirmButton: false,
})
})
$("#ajax").on("click", function() {
swal({
title: '输入您的姓名',
input: 'text',
confirmButtonText: '提交',
confirmButtonColor: '#4cd964',
showLoaderOnConfirm: true, //加载按钮是否可见
preConfirm: function() {
return new Promise(function(resolve) {
setTimeout(function() {
resolve();
}, 5000);
});
},
allowOutsideClick: false //弹框外是否可点
}).then(function(res) {
if(res) {
//实际使用过程中将此处换成ajax代码即可
swal({
type: 'success',
title: 'Ajax 请求完成',
html: '您的邮箱是: ' + '<strong>' + res + '</strong>',
confirmButtonText: '确定',
confirmButtonColor: '#4cd964'
});
}
});
});
$("#input").on("click", function() {
swal({
title: '请输入您的姓名',
input: 'text',
confirmButtonText: '确定',
confirmButtonColor: '#4cd964',
inputValidator: function(value) {
return new Promise(function(resolve, reject) {
if(value) {
resolve();
} else {
reject('至少要输入一个值哦！');
}
});
}
}).then(function(result) {
if(result) {
swal({
title: '结果通知',
text: '您的名字是: <strong>' + result + '</strong>',
confirmButtonText: '确定',
confirmButtonColor: '#4cd964'
});
}
});
})
$("#textarea").on("click", function() {
swal({
input: 'textarea',
confirmButtonText: '确定',
confirmButtonColor: '#4cd964'
}).then(function(result) {
if(result) {
swal({
title: '结果通知',
text: '您输入的是: <strong>' + result + '</strong>',
confirmButtonText: '确定',
confirmButtonColor: '#4cd964'
});
}
});
})
$("#select").on("click", function() {
swal({
title: '请选择您的姓名',
input: 'select',
inputOptions: {
'xsc': '夏守成',
'ylj': '杨林静',
'William': 'William'
},
inputPlaceholder: '选择你的名字',
showCancelButton: true,
confirmButtonText: '确定',
confirmButtonColor: '#4cd964',
preConfirm: function() {
return new Promise(function(resolve) {
resolve(["杨林静"]);
});
}
}).then(function(result) {
if(result) {
swal({
type: 'success',
html: '你选择的是: <strong>' + result[0] + '</strong>',
confirmButtonText: '确定',
confirmButtonColor: '#4cd964'
});
}
});
})
</script>

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

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

SweetAlert2 弹窗的更多相关文章

vue使用sweetalert2弹窗插件
1). 安装 sweetalert2 npm install sweetalert2@7.15.1 --save 2). 封装 sweetalert2 在 src 新建 plugins 文件夹,然后新 ...
sweetAlert2
SweetAlert2一个前端最好用的弹窗
js插件---弹出层sweetalert2（总结）
js插件---弹出层sweetalert2(总结) 一.总结一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...
jQuery的DOM操作实例（3）——创建节点&&编写一个弹窗
一.原生JavaScript编写弹窗二.jQuery编写弹窗知识点归纳总结: 在原生JavaScript中,创建一个节点: var oDiv=document.createElement(&quo ...
Android重构与设计之路，从整理提示弹窗（SmartAlertPop）开始
封装一个独立弹窗Module,这里的弹窗包括普通的Dialog方式弹框和WindowManager方式弹窗.提供一种管理项目里面弹窗的方案,便于后期修改和维护. 首先描述一个在大项目中普遍存在的一个现 ...
JavaScript弹窗
警告框: alert("警告信息!"); alert("警告\n信息!"); 确认框: var t=confirm("请确认!"); // ...
yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
yii2中如何使用modal弹窗之基本使用
作者:白狼出处:http://www.manks.top/yii2_modal_baseuse.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接, ...
多功能弹窗控件layer
开发网站的时候,如何合理运用好各种插件对开发的帮助是很大的. 免去了我们调试各种交互效果, 比如常用的弹窗.气泡.提示.加载.焦点.标签.导航.折叠等等这里会推荐几个常用的js插件,丰富多样简单易移 ...

随机推荐

[UE4]C++ STL总结
STL概述 STL (Standard Template Library, 标准模板库) 是惠普实验室开发的一系列软件的统称.主要核心分为三大部分:容器(container).算法(algorithm ...
javascript 中的函数声明和函数表达式区别
函数声明格式: function add(a, b) { alert(a+b); } 函数表达式格式: var add = function (a, b) { alert(a+b); } 解析器在向环 ...
windows下面安装easy_install和pip教程
方便安装whl:安装完成后,可以使用pip install xxx.whl 安装一个python轮子 python扩展库的路径:Python\Python36\Lib\site-packages\ ...
java编译器知识
代码编译器: 代码: 编译就是讲一种代码编译成计算机可以理解的指令. ================================================================= ...
提高solr的搜索速度
之前是使用12台机分布式搜索,1台为主机做索引并分发给子机,8台做大索引搜索服务,3 台做小索引搜索服务,配置基本是内存在4-8G,cpu:2-8core的服务器,索引的大小为8G.搜索的响应时间是 ...
web.py模版系统
介绍: 调用的web.py模版语言Templetor旨在将python的强大功能带入模版.它不是为模板创建新语法,而是重用python语法. Templetor故意限制模版中的变量访问.用户可以访问传 ...
3.4 SpringBoot发送邮件
spring官方提供了spring-boot-starter-mail来整合邮件发送功能,本质上还是利用了JavaMailSender类. 首先我们要在项目中引入相关依赖 <parent & ...
Python常量工具类
1.定义常量类constant.py # -*- coding: utf-8 -* """常量工具类 author: Jill usage: from constant ...
字符串，数组，定时器，form
一.字符串 <script> /* // 字符串的属性 var a="hello world"; console.log(a.length); console.log( ...
Spring DevTools 介绍
Spring DevTools 介绍 Spring Boot包括一组额外的工具,可以使应用程序开发体验更加愉快. spring-boot-devtools模块可以包含在任何项目中,它可以节省大量的时间 ...

SweetAlert2 弹窗

SweetAlert2 弹窗的更多相关文章

随机推荐

热门专题