带遮罩的弹窗示例

打开弹窗

<!DOCTYPE html>
        <html lang="zh-CN">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>带遮罩的弹窗示例</title>
        <style>
             /* 遮罩层样式 */
             .modal-overlay {
                 display: none; /* 默认隐藏 */
                 position: fixed;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
                 z-index: 1000;
             }
        
             /* 弹窗样式 */
             .modal {
                 display: none; /* 默认隐藏 */
                 position: fixed;
                 top: 50%;
                 left: 50%;
                 transform: translate(-50%, -50%);
                 width: 50%;
                 max-width: 630px;
                 background-color: #fff;
                 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                 z-index: 1001;
                 padding: 20px;
                 border-radius: 5px;
             }
        
             /* 关闭按钮样式 */
             .close-btn {
                 position: absolute;
                 top: 0px;
                 right: 6px;
                 cursor: pointer;
                 font-size: 24px;
                 color: #333;
             }
        
             /* 显示遮罩和弹窗 */
             .modal-overlay.active,
             .modal.active {
                 display: block;
             }
        </style>
        </head>
        <body>
        
        
        <div id="openModalBtn" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px;">
             打开弹窗
        </div>
        <div  style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; margin-bottom: 20px;">
            源码：
            
        </div>
        
        
        <div class="modal-overlay" id="modalOverlay"></div>
        
        
        <div class="modal" id="myModal">
             <span class="close-btn" onclick="closeModal()">×</span>
             <img src="https://ypy.zhuns.top/2024/05/13/66417c79bacee.png" alt="微信公众号" style="width:100%;">
        </div>
        
        <script>
             // 打开弹窗的函数
             function openModal() {
                 document.getElementById('modalOverlay').classList.add('active');
                 document.getElementById('myModal').classList.add('active');
             }
        
             // 关闭弹窗的函数
             function closeModal() {
                 document.getElementById('modalOverlay').classList.remove('active');
                 document.getElementById('myModal').classList.remove('active');
             }
        
             // 绑定div点击事件
             document.getElementById('openModalBtn').onclick = openModal;
        </script>
        
        </body>
        </html>