<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹框</title>
<script type="text/javascript">
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 15 + "px";
window.onresize = function () {
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 15 + "px";
}
</script>
<style>
* {
padding: 0;
margin: 0;
}
/* 遮罩 */
.cover {
/* 固定 */
position: fixed;
width: 100%;
height: 100%;
/* 层级 */
z-index: 199;
/* 背景透明 */
background: rgba(51, 51, 51, .8);
padding: 0 .9rem;
/* 默认不显示 */
display: none;
}
/* 中间内容 */
.content {
/* content盒子尺寸 */
width: 13.28rem;
height: 17.88rem;
padding: 6.68rem 1.04rem 4.36rem;
border-radius: 0.5rem;
top: 4.98rem;
box-sizing: border-box;
/* 图片信息，地址和大小 */
background: url("./images/ggbgimg.png");
background-size: 13.28rem;
/* 字体 */
color: #333;
position: fixed;
line-height: 1.05rem;
text-align: center;
font-size: .64rem;
/* 左对齐 */
text-align: left;
/* 首行缩进 */
text-indent: 2em;
line-height: 1.04rem;
font-weight: 400;
}
#btn {
display: block;
width: 10.04rem;
height: 2rem;
border-radius: 1rem;
background: #FB5C49;
box-shadow: 2px 2px 5px #FB5C49;
text-align: center;
font-size: .7rem;
color: #fff;
line-height: 2rem;
text-indent: 0;
margin: 0 auto;
margin-top: 2rem;
}
#btn2 {
display: block;
width: 10.04rem;
height: 2rem;
border-radius: 1rem;
background: #FB5C49;
box-shadow: 2px 2px 5px #FB5C49;
text-align: center;
margin: 100px auto;
font-size: .7rem;
color: #fff;
line-height: 2rem;
text-indent: 0;
}
</style>
</head>
<body>
<div class="cover" id="dialog">
<div class="content">
为给您提供更好的服务，我司将于2022年4月8日（周五）22点至9日（周六）7点进行系统升级改造，届时投保功能无法使用，给您造成不便敬请谅解！
<span id="btn" onclick="closepop()">我知道了</span>
</div>
</div>
<!-- 点击按钮出现 -->
<!-- 按钮 -->
<button onclick="showlog_result()" id="btn2">点我出弹框</button>
<script src="./js/main.js"></script>
<script src="./js/jquery-1.9.1.min.js"></script>
<script>
//显示弹框
function showlog_result() {
$("#dialog").css({
display: "block"
}); //通过Jquery的css()更改样式
$("#dialogmask").css({
display: "block"
});
}
//关闭弹框
function closepop() {
$("#dialog").css({
display: "none"
});
$("#dialogmask").css({
display: "none"
});
}
</script>
</body>
</html>
