<!DOCTYPE html>
<html style="height: 100%;">
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>alertPopShow</title>
<link rel="stylesheet" href="common.css?v=20160520">
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="alertPopShow.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#demo1').on('click', function(){
webToast("恭喜您，修改成功恭喜您，修改成功恭喜您修改成功恭喜您","middle",3000);
});
$('#demo2').on('click', function(){
popTipShow.alert('彈窗标題','自定義彈窗内容，居左對齊顯示，告知需要确認的資訊等', ['知道了'],
function(e){
//callback 處理按鈕事件
var button = $(e.target).attr('class');
if(button == 'ok'){
//按下确定按鈕執行的操作
//todo ....
this.hide();
}
}
);
});
$('#demo3').on('click', function(){
popTipShow.confirm('彈窗标題','自定義彈窗内容，居左對齊顯示，告知需要确認的資訊等',['确 定','取 消'],
function(e){
//callback 處理按鈕事件
var button = $(e.target).attr('class');
if(button == 'ok'){
//按下确定按鈕執行的操作
//todo ....
this.hide();
setTimeout(function() {
webToast("操作成功","top", 2000);
}, 300);
}
if(button == 'cancel') {
//按下取消按鈕執行的操作
//todo ....
this.hide();
setTimeout(function() {
webToast("您選擇“取消”了","bottom", 2000);
}, 300);
}
}
);
});
$('#demo4').on('click', function(){
var html = "<label>姓名：<input class='confirm_input' placeholder='請輸入'></label>";
popTipShow.confirm('彈窗标題',html,['确 定','取 消'],
function(e){
//callback 處理按鈕事件
var button = $(e.target).attr('class');
if(button == 'ok'){
if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){
webToast("姓名不能為空！","bottom", 3000);
return;
}
this.hide();
setTimeout(function() {
webToast($(".confirm_input").val(),"bottom", 3000);
}, 300);
//按下确定按鈕執行的操作
//todo ....
}
if(button == 'cancel') {
//按下取消按鈕執行的操作
//todo ....
this.hide();
setTimeout(function() {
webToast("您選擇“取消”了","top", 2000);
}, 300);
}
}
);
});
});
</script>
</body>
<div class="demo" id="demo1">toast</div>
<div class="demo" id="demo2">alert</div>
<div class="demo" id="demo3">confirm</div>
<div class="demo" id="demo4">confirm+input</div>
</html>