<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name="apple-touch-fullscreen" content="yes">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />
<link href="css/mbox.css" type="text/css" rel="stylesheet">
<script src="mbox.js" type="text/javascript"></script>
<style>
.disn {
display: none;
}
/*start
对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。
对于反方向的框，每个子元素的下边缘沿着框的底边放置。
测试
end
对于正常方向的框，每个子元素的下边缘沿着框的底边放置。
对于反方向的框，每个子元素的上边缘沿着框的顶边放置。
测试
center
均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。*/
.main {
height: 100%;
width: 100%;
position: absolute;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
background: #ccc;
height: 200px;
width: 80%;
}
</style>
</head>
<body>
<div class="main" style="display:none;">
<div class="content" style="line-height:2;text-align:center;">方案二：使用position & margin:auto 垂直居中</div>
</div>
<div style="padding:25px 50px; font-size:16px;">
<a href="javascript:;" id="ontan">请点击我！</a>
</div>
<div style="padding:25px 50px; font-size:16px;">
<a href="javascript:;" id="ontan01">请点击我！</a>
</div>
<div style="padding:25px 50px; font-size:16px;">
<a href="javascript:;" id="spload">请点击我！sploading</a>
</div>
<div class="disn" id="ces" style="width:100%;">
<ul>
<li class="tt" id="ddd">点我看效果</li>
<li id="yy">toggleClass</li>
</ul>
</div>
<p id="test">对于正常方向的框，每个子元素的上边缘沿着框的顶边放置对于正常方向的框，原创弹出层插件</p>
</body>
<script type="text/javascript">
var getId = document.getElementById("ontan");
var getId01 = document.getElementById("ontan01");
var spload = document.getElementById(‘spload‘);
document.getElementById("ddd").onclick = function() {
alert(121545455);
}
getId.onclick = function() {
mBox.open({
//width:‘150px‘,
//title:["我就是标题！","background-color:#3293E0;color:#fff;"],
content: mBox.cell("#test"),
btnName: [‘确定‘, ‘取消‘]
});
}
getId01.onclick = function() {
$M.open({
//width:‘150px‘,
//title:["我就是标题！","background-color:#3293E0;color:#fff;"],
content: "<div>对于正常方向的框</div>",
btnName: [‘确定‘, ‘取消‘]
});
}
spload.onclick = function() {
mBox.open({
content: ‘您好‘,
conStyle: ‘background-color:rgba(0,0,0,0.6); color:#fff; border:none;text-align: center;bottom: -200px;animation:up 0.3s 0s‘,
time: 2000 //2秒后自动关闭
});
}
</script>
<style type="text/css">
@keyframes up {
0% {
opacity: 0;
transform: translateY(100px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
</style>
</html>
看看layer的msg效果
时间： 2024-12-30 04:33:40