<!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>
手机移动端美化弹窗提示确认框js特效代码
需积分: 50 129 浏览量
2018-08-16
21:48:49
上传
评论 1
收藏 109KB ZIP 举报
手机移动端美化弹窗提示确认框js特效代码.zip （18个子文件） 
HTML5手机端简单弹出对话框代码 
index.html 4KB js 
zpDialogSix.js 3KB jquery-1.9.1.min.js 90KB zepto.js 59KB zpDialogTwo.js 2KB zpDialog.js 2KB zeptoDialog.js 2KB dialog.js 2KB zpDialogFive.js 2KB zpDialogSeven.js 2KB zpDialogThree.js 2KB zepto.dialog.js 2KB zpDialogFour.js 2KB touch.js 6KB image 
ico.ooopic.png 25KB
loading.gif 4KB right.png 12KB demo.html 3KB资源评论
