在内容大于一屏时,弹框在屏幕上保持水平垂直居中
1、弹框宽高已知
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>弹窗水平垂直居中</title>
<style>
*{padding: 0;margin: 0;}
html,body{width:100%;height:100%;}
#wrap{
width: 100%;
height: 1000px;
background: grey;
}
.tip{
width: 140px;
height: 40px;
}
.shade{
display: none;
width: 50px;
height: 50px;
border: 1px solid #00ff00;
background: #fff0f5;
z-index: 100;
position: fixed;/*相对于视窗定位*/
top:50%;
left:50%;
margin-top: -25px;
margin-left:-25px;
}
</style>
</head>
<body>
<div id="wrap">
<button class="tip">弹框</button>
</div>
<div class="shade"></div>
<script>
var tip = document.querySelector('.tip');
tip.onclick = function(){
document.querySelector('.shade').style.display = 'block';
}
</script>
</body>
</html>
2、弹框宽高未知
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>弹窗水平垂直居中</title>
<style>
*{padding: 0;margin: 0;}
html,body{width:100%;height:100%;}
#wrap{
width: 100%;
height: 1000px;
background: grey;
}
.tip{
width: 140px;
height: 40px;
}
.shade{
display: none;
border: 1px solid #00ff00;
background: #fff0f5;
z-index: 100;
position: fixed;
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="wrap">
</div>
<button class="tip">弹框</button>
<div class="shade">
弹框宽高未知 弹框宽高未知 弹框宽高未知 弹框宽高未知
</div>
<script>
var tip = document.querySelector('.tip');
tip.onclick = function(){
document.querySelector('.shade').style.display = 'block';
}
</script>
</body>
</html>