<!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>
垂直居中的弹框(弹框宽高未知)
最新推荐文章于 2021-09-24 14:55:02 发布