首页 > 代码库 > 适配移动端的简单弹出框居中效果

适配移动端的简单弹出框居中效果

2024-09-17 04:35:47   220人阅读

技术分享

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style type="text/css">
 6         #mask_box {
 7             width:100%;
 8             height:100%;
 9             z-index:9999;
10             position:fixed;
11             top:0;
12             left:0;
13             display: none;
14         }
15         #DialogWrapper {
16             width: 500px;
17             margin: 50px auto;
18             padding: 10px;
19             text-align: center;
20             background: #f1f1f1;
21             border-radius: 20px;
22         }
23         #DialogYesBtn{
24             margin-left: 10px;
25             color: #fff;
26             padding: 5px 20px;
27             cursor: pointer;
28         }
29         #DialogNoBtn{
30             padding: 5px 10px;
31             cursor: pointer;
32         }
33         #DialogWrapper img {
34             width: 20%;
35         }
36         @media screen and (max-width: 768px) {
37             /*css for mobile*/
38         }
39     </style>
40 </head>
41 <body>
42     <div id="mask_box">
43         <div id="DialogWrapper" >
44             <div class="Dialog_content">
45                 <h1 style="font-size:40px;border-bottom:1px solid #ddd;padding-bottom:10px;">Viavelobike</h1>
46                 <div>
47                     <p>Please choose your country:</p>
48                 </div>
49                 <div class="Dialog_text">
50                     <img id="DialogYesBtn" src=http://www.mamicode.com/"https://cdn.shopify.com/s/files/1/1811/7921/t/4/assets/canada.jpg" alt="canada" />
51                     <img id="DialogNoBtn" src=http://www.mamicode.com/"https://cdn.shopify.com/s/files/1/1811/7921/t/4/assets/us.jpg" alt="us" />
52                 </div>
53             </div>
54         </div>
55     </div>
56 </body>
57 <script src=http://www.mamicode.com/"jquery-1.12.4.min.js"></script>
58 <script>
59    $(function(){
60        $("#mask_box").fadeToggle(1000);
61 
62    });
63    $(function(){
64        $("#DialogYesBtn").click(function(){
65            window.location.href = http://www.mamicode.com/‘http://stackoverflow.com/‘; //特别适合程序员的问答站点，秒杀国内某度
66        })
67        $("#DialogNoBtn").click(function(){
68            $("#mask_box").fadeToggle(2000);
69        })
70    });
71 </script>
72 </html>

代码解析：首先，只适用于需要弹出窗及居中效果，但上述代码不适用于有半透明遮罩效果的场景，如果想实现，需借助js，有空再补充。

适配移动端的简单弹出框居中效果


联系
我们