<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1 user-scalable=no">
<title>HTML5手机端简单弹出对话框代码</title>
<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
<!-- <script src="js/zepto.dialog.js"></script> -->
<!-- <script src="js/zeptoDialog.js"></script> -->
<script src="js/zpDialog.js"></script>
<script src="js/zpDialogTwo.js"></script>
<script src="js/zpDialogThree.js"></script>
<script src="js/zpDialogFour.js"></script>
<script src="js/zpDialogFive.js"></script>
<script src="js/zpDialogSix.js"></script>
<script src="js/zpDialogSeven.js"></script>
<!-- <script src="js/dialog.js"></script> -->
<style type="text/css">
button{
width: 100%;
min-height: 38px;
margin:1% auto;
border-width:0;
border-radius:10px;
outline-style: none;
background:#1E90FF;
line-height: 14px;
font-size: 14px;
color:#fff;
}
.dialog-container{
width:100%;
height: 100%;
position: fixed;
top:0;
left: 0;
display:-webkit-flex;
-webkit-justify-content:center;
-webkit-align-items:center;
background:rgba(0,0,0,0.6);
}
.dialog-window{
padding:2em 3em;
border-width: 0;
border-radius:10px;
background:rgba(0,0,0,0.8);
}
.dialog-header{
width: 50px;
height: 50px;
margin: 0 auto;
border-width: 0;
}
.dialog-header.changeImage{
width: 50px;
height: 50px;
margin: 0 auto;
border-width: 0;
animation:myHead 3s;
-webkit-animation:myHead 3s;
}
@keyframes myHead{
50%{
background-size: 80px;
width:80px;
height: 80px;
}
}
.dialog-header{
}
.dialog-header.ok{
background:url(image/right.png);
background-size:50px;
}
.dialog-header.loading{
background:url(image/loading.gif);
background-size:50px;
}
.dialog-header.warning{
background:url(image/ico.ooopic.png);
background-size:50px;
}
.dialog-content{
text-align: center;
padding: 1em;
color:#666;
line-height: 200%;
font-size:14px;
}
.dialog-footer{
width: auto;
padding: 0 0.6em;
display:-webkit-flex;
-webkit-justify-content:center;
-webkit-align-items:center;
}
.dialog-footer button{
display: inline-block;
-webkit-appearance:normal;
border-radius: 5px;
margin:0 0.4em;
padding: 0.2em 0.8em;
font-size: 14px;
}
.dialog-footer button.red{
background:red;
}
.dialog-footer button.blue{
background:#01A2A2;
}
</style>
</head>
<body>
<!-- <div class="dialog-container">
<div class="dialog-window">
<div class="dialog-header loading">
</div>
<div class="dialog-content">这个一个等待框</div>
<div class="dialog-footer">
<button class="blue">按钮1</button>
<button >按钮2</button>
<button class="red">按钮3</button>
</div>
</div>
</div> -->
<button id = "btn1">没有传递任何参数(需手动关闭)</button>
<button id = "btn2">弹出一个不带任何按钮,且是警告的框,并且两秒后自动关闭</button>
<button id = "btn3">弹出一个有确认的取消的按钮的成功框,点击按钮直接关闭</button>
<button id = "btn4">弹出一个有确认的警告框,点击按钮不可以关闭(需要手动关闭)</button>
<button id = "btn5">弹出一个多组合的按钮框,且按钮样式可以定制</button>
<button id = "btn6">弹出一个确认和删除的框,点击确认弹出加载2秒自动关闭,点击删除按钮把上一次框关闭</button>
<button id = "btn7">带动画的弹出框</button>
<script>
$('#btn1').tap(function(){
var d = $.dialog();
});
$('#btn2').tap(function(){
var d = $.dialogTwo();
});
$('#btn3').tap(function(){
var d = $.dialogThree();
});
$('#btn4').tap(function(){
var d = $.dialogFour();
});
$('#btn5').tap(function(){
var d = $.dialogFive();
});
$('#btn6').tap(function(){
var d = $.dialogSix({
type:'warning',
message:'这是一个警告框!',
buttons:['<button id="right" class="blue">确认</button>',
'<button id="cancle" class="red">删除</button>']
})
});
$('#btn7').tap(function(){
var d = $.dialogSeven();
});
</script>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
</body>
</html>