弹窗代码

2024-04-30 00:54:48 军事

弹窗代码是一种常用的网页弹窗实现方式,通过HTML、CSS和JavaScript代码来实现在网页上弹出一个窗口,用来显示一些提示信息或者交互内容。
以下是一个简单的弹窗代码示例:
HTML部分: ```html 弹窗示例 ```
CSS部分(style.css): ```css .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); }
.modal-content { background-color: #fff; margin: 25% auto; padding: 20px; border: 1px solid #888; width: 50%; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; }
.close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ```
JavaScript部分(script.js): ```javascript const openModalBtn = document.getElementById('openModal'); const modal = document.getElementById('modal'); const closeModalBtn = document.querySelector('.close');
openModalBtn.addEventListener('click', () => { modal.style.display = 'block'; });
closeModalBtn.addEventListener('click', () => { modal.style.display = 'none'; }); ```
通过上述代码,点击按钮“打开弹窗”时,会在页面上弹出一个带有文本内容的弹窗,点击窗口右上角的“×”按钮或者弹窗外部的遮罩层,可以关闭弹窗。这是一个简单的弹窗示例,可以根据实际需求进行样式和功能上的调整。

相关阅读