用CSS3在手机上写弹出框，遮盖层

Posted 2020-07-30 ruoyuting

html：

在页面头部要写

<title>网上预约</title>
<link href="../App_Themes/default/css/header.css" rel="stylesheet" type="text/css" />
<link href="../App_Themes/default/css/public.css" rel="stylesheet" type="text/css" /

<!--自适应手机页面-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" name="viewport" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="msapplication-tap-highlight" content="no" />

<script src="../App_Themes/default/js/jquery-1.9.1.min.js" type="text/javascript"></script>

 

 

<div class="page onlinebooking">

<div class="mask"></div>
<div class="pop">
<p>来源</p>
<p><input type="radio" checked="checked" />微信公众号</p>
<p><input type="radio" />中介</p>
<p><input type="radio" />朋友介绍</p>
<p><input type="radio" />传单</p>
<p><input type="radio" />其他</p>
<p style="border:none;">
<input type="button" value="确 定" />
</p>
</div>

</div>

 

css：

.onlinebooking .mask
{
width: 100%;
height: 100%;
background: #000;
opacity: .3;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}

.onlinebooking .pop
{
width: 240px;
height: 16rem;
background: #fff;
font-size: 62.5%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -118px;
z-index: 10;
}

.onlinebooking .pop p
{
width:100%;
line-height:2.8em;
vertical-align:middle;
padding: 0 1em;
box-sizing: border-box;
border-bottom:1px solid #eee;
}

.onlinebooking .pop p input[type="radio"]
{

margin-right:.5em;
position:relative;
top:2px;
-webkit-appearance: radio;

}

.onlinebooking .pop p input[type="button"]
{
width:100%;
line-height:2.5em;
margin-top:1em;
background-color:#B380B5;
border:none;
text-align:center;
vertical-align:middle;
color:#fff;
border-radius:.2em;
font-family: Arial, Microsoft YaHei;
font-size: 1em;
}