适配移动端的简单弹出框居中效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了适配移动端的简单弹出框居中效果相关的知识，希望对你有一定的参考价值。
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，有空再补充。
以上是关于适配移动端的简单弹出框居中效果的主要内容，如果未能解决你的问题，请参考以下文章