<html> <head lang="en"> <head> <meta charset="UTF-8"> <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <style> .black_overlay { display: none; position: absolute; top: 0%; left: 0%; 100%; height: 100%; background-color: #222; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=78); } .pop_win { display: none; position: absolute; top: 10%; left: 20%; 60%; height: 75%; padding: 10px; border: 2px solid #3b3e41; background-color: white; z-index: 9999; overflow: auto; border-radius: 25px; } .fancybox-button { background: rgba(30, 30, 30, .6); border: 0; border-radius: 0; box-shadow: none; cursor: pointer; display: inline-block; height: 44px; margin: 0; padding: 10px; position: relative; transition: color .2s; vertical-align: top; visibility: inherit; 44px; } </style> <script type="text/javascript"> function popWin() { document.getElementById('light').style.display = 'block'; document.getElementById('fade').style.display = 'block' } function closeWin() { document.getElementById('light').style.display = 'none'; document.getElementById('fade').style.display = 'none' } </script> </head> <body> <p>网页：单击按钮弹出悬浮窗+页面遮罩</p> <a href="javascript:void(0)" onclick="popWin();">请点这里</a> <div id="light" class="pop_win"> </div> <div id="fade" class="black_overlay"><a href="javascript:void(0)" onclick="closeWin();" style="float: right;" class="fancybox-button fancybox-button--close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 10.6L6.6 5.2 5.2 6.6l5.4 5.4-5.4 5.4 1.4 1.4 5.4-5.4 5.4 5.4 1.4-1.4-5.4-5.4 5.4-5.4-1.4-1.4-5.4 5.4z"></path></svg></a></div> </body> </html>
效果：
