注意p.wrap的定位是固定定位。转载请注明网址。
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="utf-8">
5 <meta charset="utf-8"/>
6 <meta name="viewport"
7 content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
8 <meta name="MobileOptimized" content="320"/>
9 <meta http-equiv="Cache-Control" content="no-cache,must-revalidate,no-siteapp"/>
10 <meta http-equiv="Pragma" content="no-cache"/>
11 <meta name="copyright" content="Copyright © nail salon 2015 | All Rights Reserved."/>
12 <meta name="keywords" content=""/>
13 <meta name="description" content=""/>
14 <title></title>
15 <link href="../css/bootstrap.min.css" rel="stylesheet">
16 <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
17 <style>
18 html{font-size:100px;}
19
20 /* iphone 4-5 */
21 @media (min-device-width : 320px) and (max-device-width : 374px) and (-webkit-min-device-pixel-ratio : 2){
22 html{font-size: 85px;}
23 }
24 /* iphone 6 */
25 @media (min-device-width : 375px) and (max-device-width : 720px) and (-webkit-min-device-pixel-ratio : 2){
26 html{font-size: 100px;}
27 }
28 /* iphone6 plus */
29 @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3) {
30 html {
31 font-size: 110px;
32 }
33 }
34 html,body {height: 100%;}
35 a:hover,a:visited,a:active {text-decoration: none; }
36 .p_wrap{ width:100%; height: 100%;background:rgba(0,0,0,.8); position: fixed; left: 0;top: 0; z-index: 10000;}
37 .p_out { margin: 0 auto; height: 100%; width: 2.25rem; overflow: hidden; position: relative; }
38 .p_out {display: table; position: static;}
39 /*.p_mid {position: absolute; top: 50%;} /!* for explorer only*!/*/
40 .p_mid{display: table-cell; vertical-align: middle; position: static; background: none;}
41 /*.p_in {position: relative; top: -50%; 400px;margin: 0 auto;} /!* for explorer only *!/*/
42 .p_in{
43 padding: .3rem .225rem .225rem .3rem;
44 -webkit-border-radius: .05rem;
45 -moz-border-radius: .05rem;
46 -ms-border-radius: .05rem;
47 -o-border-radius: .05rem;
48 border-radius: .05rem;
49 background: #fff;
50 }
51 .p_in p {
52 text-align: center;
53 font-size: .12rem;
54 line-height: .25rem;
55 }
56 .p_in a {
57 display: block;
58 margin-top: .2rem;
59 -webkit-border-radius: .05rem;
60 -moz-border-radius: .05rem;
61 -ms-border-radius: .05rem;
62 -o-border-radius: .05rem;
63 border-radius: .05rem;
64 height: .3rem;
65 line-height: .3rem;
66 text-align: center;
67 font-size: .12rem;
68 }
69 a.p_single {
70 margin: 0 auto;
71 width: 1.6rem;
72 color: #fff;
73 background: #91c33e;
74 border: 1px solid #91c33e;
75 }
76 .p_two a {
77 width: .7rem;
78 border: 1px solid #333;
79 }
80 .p_two a.cur {
81 border: 1px solid #91c33e;
82 background: #91c33e;
83 color: #fff;
84 }
85 </style>
86 </head>
87 <body>
88 <div class="p_wrap">
89 <div class="p_out">
90 <div class="row p_mid">
91 <div class=" p_in" >
92 <p>弹出文案弹出文案</p>
93 <div>
94 <a class="p_single" href="javascript: void(0);">确 定</a>
95 </div>
96 <!--
97 <div class="p_two clearfix">
98 <a class="p_left fl" href="javascript:void(0);">换个技师</a>
99 <a class="p_right fr cur" href="javascript:void(0);">确定</a>
100 </div>
101 -->
102 </div>
103 </div>
104 </div>
105 </div>
106 </body>
107 </html>