<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../files/js/jquery-3.3.1.min.js"></script> <style> .box { position: relation; display: none; }
//遮罩层样式 .modal_cover { 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, .5); }
//并排内容样式 .modal { position: absolute; 823px; background: salmon; z-index: 99; height: 400px; /* 水平垂直居中 */ left: 50%; top: 50%; transform: translate(-50%, -50%); } .content { 100%; height: 600px; /* 超出高度右侧出现垂直滚动条 */ overflow: auto; overflow-x: hidden; cursor: pointer } </style> </head> <body> <button class="surprise" onclick="">点击我会有惊喜呦！！！！</button> <div class="box"> <!-- 遮罩层 --> <div class="modal_cover"></div> <div class="modal"> <div class="content">提交申诉</div> </div> </div> </body> <script> $(document).ready(function () { $(".surprise").click(function () { $(".box").css("display", "block"); }) // 点击遮罩层区域 蒙版层消失 $(".modal_cover").click(function () { $(this).parent(".box").css("display", "none"); }) }) </script> </html>