Html:
At the head of the page to write
<title> Online Booking </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 "/
<!--Adaptive Phone page--
<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> sources </p>
<p><input type= "Radio" checked= "checked"/> Public number </p>
<p><input type= "Radio"/> Intermediary </p>
<p><input type= "Radio"/> Friend introduction </p>
<p><input type= "Radio"/> Flyer </p>
<p><input type= "Radio"/> Other </p>
<p style= "Border:none;" >
<input type= "button" value= "OK"/>
</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;
}
Use CSS3 to write pop-up boxes on your phone, covering layers