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="https://cdn.shopify.com/s/files/1/1811/7921/t/4/assets/canada.jpg" alt="canada" />
51 <img id="DialogNoBtn" src="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="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://stackoverflow.com/‘; //特别适合程序员的问答站点，秒杀国内某度
66 })
67 $("#DialogNoBtn").click(function(){
68 $("#mask_box").fadeToggle(2000);
69 })
70 });
71 </script>
72 </html>
代码解析：首先，只适用于需要弹出窗及居中效果，但上述代码不适用于有半透明遮罩效果的场景，如果想实现，需借助js，有空再补充。
时间： 2024-10-10 08:54:32