<!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">
<!--標準mui.css-->
<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可以製作很多非常好的彈窗提醒效果，如下所示：
