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]UE4中的常见类
一.Actor:可以放在世界中物体二.Pawn:可以接受Controller输入的Actor 三.Character:是一个可以行走.跑.跳等行为的Pawn 四.Controller:没有物理表现的 ...
td高度不随内容变化display:block;display:block;display:block;display:block;display:block;
在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ height:236px; overflow:hidden; 在TD里加个DIV就可以解决!CSS对应改成#aaa td div{ ...
pandas的merge函数
pandas.merge(left,right,how='inner',on=None,left_on=None,right_on=None,left_index=False,right_index= ...
文件系统性能测试--iozone
iozone 一个文件系统性能评测工具,可以测试Read, write, re-read,re-write, read backwards, read strided, fread, fwrite, ...
Xshell批量导入IP地址
我的xshell被覆盖了~~~结果原来的host没了,很郁闷要一个一个添加,网上找了很长时间在Xshell中批量添加IP的文章,结果都不行. 最后找到了https://blog.netsarang.c ...
Elasticsearch 全文搜索和keyword search字段的mapping定义
在ES5.0之前我们对于需要keyword search的字段都是这样定义的: { "field name":{ "type": "string&qu ...
DB性能-隐式转换
1 什么是隐式转换当源数据的类型和目标数据的类型不同的时候,如果没有转换函数,就会发生隐式转换,也称自动转换.当然, 有些情况下有些类型是不可以发生转换的,比如说从DATE类型转换到N ...
VB6 如何创建一个标准控制台程序
打开 VB6 并新建一个标准EXE程序,把窗口删掉,然后再加入一个模块. 在模块中加入AllocConsole.FreeConsole.SetConsoleTitle.Sleep的API声明: Pub ...
运行tomcat显示指定的服务未安装解决办法
一.问题重现二.原因分析 tomcat7.exe和tomcat7w.exe要起作用必须先未这两个文件安装服务. 其中tomcat7.exe这个文件是用来启动tomcat的,tomcat7w.exe这 ...
ArrayList 原理(1)
ArrayList是Java List类型的集合类中最常使用的,本文基于Java1.8,对于ArrayList的实现原理做一下详细讲解. (Java1.8源码:http://docs.oracle.c ...

SweetAlert2 弹窗

SweetAlert2 弹窗的更多相关文章

随机推荐

热门专题