首页 > > 网页制作 > css >

原生模态框,遮罩层

2019-04-12 09:25:39来源：博客园阅读 ()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
background-color: #000000;
}
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.div1 {
position: fixed;
left: 0;
right: 0;
top: 100px;
margin: 0 auto;
width: 345px;
height: 256px;
background: #ffffff;
border-radius: 5px;
overflow: hidden;
z-index: 100;
}
.line {
width: 343px;
border: 1px dashed #ebebeb;
margin-top: 22px;
}
.q1 {
max-width: 250px;
height: 20px;
font-size: 20px;
font-family: PingFang-SC-Heavy;
font-weight: bold;
color: rgba(52, 52, 52, 1);
line-height: 20px;
margin-top: 30px;
}
.q2 {
max-width: 250px;
height: 19px;
font-size: 19px;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: rgba(52, 52, 52, 1);
line-height: 19px;
margin-top: 9px;
}
.q3 {
max-width: 250px;
height: 19px;
font-size: 19px;
font-family: PingFang-SC-Bold;
font-weight: bold;
color: rgba(52, 52, 52, 1);
margin-top: 10px;
line-height: 19px;
}
.q4 {
max-width: 250px;
height: 15px;
font-size: 16px;
font-family: PingFang-SC-Medium;
font-weight: 500;
color: rgba(102, 102, 102, 1);
margin-top: 12px;
line-height: 15px;
}
li {
margin: 0 auto;
text-align: center;
}
.b1 {
width: 113px;
height: 41px;
background: #b4b3b3;
border-radius: 21px;
border: 0;
margin: 24px 0 0 34px;
font-size: 16px;
color: #ffffff;
}
.b2 {
width: 113px;
height: 41px;
background: #cbaf7d;
border-radius: 21px;
border: 0;
margin-left: 50px;
font-size: 16px;
color: #ffffff;
}
.shield {
position: fixed;
background: rgba(0, 0, 0, 0.4);
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 90;
}
</style>
</head>
<body>
<div>
<div class="div1">
<ul style="width:100%;">
<li class="q1">哈哈哈哈中信营业厅</li>
<li class="q2">高尧三</li>
<li class="q3">汉中门分店</li>
<li class="q4">会员有效期：2020-10-10</li>
</ul>
<div class="line"></div>
<div>
<button class="b1">取消</button>
<button class="b2">确定</button>
</div>
</div>
<div class="shield"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background-color: #000000;
      }
      ul,
      li {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .div1 {
        position: fixed;
        top: 0;
        left: 0;
        width: 345px;
        height: 256px;
        background: #ffffff;
        border-radius: 5px;
        overflow: hidden;
        z-index: 100;
      }
      .line {
        width: 343px;
        border: 1px dashed #ebebeb;
        margin-top: 22px;
      }
      .q1 {
        max-width: 250px;
        height: 20px;
        font-size: 20px;
        font-family: PingFang-SC-Heavy;
        font-weight: bold;
        color: rgba(52, 52, 52, 1);
        line-height: 20px;
        margin-top: 30px;
      }
      .q2 {
        max-width: 250px;
        height: 19px;
        font-size: 19px;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(52, 52, 52, 1);
        line-height: 19px;
        margin-top: 9px;
      }
      .q3 {
        max-width: 250px;
        height: 19px;
        font-size: 19px;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(52, 52, 52, 1);
        margin-top: 10px;
        line-height: 19px;
      }
      .q4 {
        max-width: 250px;
        height: 15px;
        font-size: 16px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        margin-top: 12px;
        line-height: 15px;
      }
      li {
        margin: 0 auto;
        text-align: center;
      }
      .b1 {
        width: 113px;
        height: 41px;
        background: #b4b3b3;
        border-radius: 21px;
        border: 0;
        margin: 24px 0 0 34px;
        font-size: 16px;
        color: #ffffff;
      }
      .b2 {
        width: 113px;
        height: 41px;
        background: #cbaf7d;
        border-radius: 21px;
        border: 0;
        margin-left: 50px;
        font-size: 16px;
        color: #ffffff;
      }
      .shield {
        position: fixed;
        background: rgba(0, 0, 0, 0.4);
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 90;
      }
    </style>
  </head>
  <body>
    <div>
      <div class="div1">
        <ul style="width:100%;">
          <li class="q1">哈哈哈哈中信营业厅</li>
          <li class="q2">高尧三</li>
          <li class="q3">汉中门分店</li>
          <li class="q4">会员有效期：2020-10-10</li>
        </ul>
        <div class="line"></div>
        <div>
          <button class="b1">取消</button>
          <button class="b2">确定</button>
        </div>
      </div>
      <div class="shield"></div>
    </div>
  </body>
</html>