HTML 点击文字弹出居中自适应 DIV 弹窗代码
可以使用 CSS 和 JavaScript 来实现点击文字弹出 DIV 弹窗，并设置弹窗的宽度和高度，并让其自适应居中的效果。
HTML 代码
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='style.css'> <!-- 引入样式文件 -->
<script src='script.js'></script> <!-- 引入脚本文件 -->
</head>
<body>
<p onclick='showPopup()'>点击这里弹出弹窗</p>
<div id='popup' class='popup'>
<div class='popup-content'>
这是弹窗的内容
</div>
</div>
</body>
</html>
CSS 代码 (style.css)
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 80%;
max-height: 80%;
background-color: white;
padding: 20px;
}
JavaScript 代码 (script.js)
function showPopup() {
var popup = document.getElementById('popup');
popup.style.display = 'block';
}
以上代码会在点击 <p> 标签时显示一个全屏的半透明背景，并在屏幕中央弹出一个 DIV 弹窗，DIV 弹窗的宽度和高度可以通过 CSS 样式文件中的 .popup-content 类进行调整。DIV 弹窗的内容可以在 HTML 代码中的 <div class='popup-content'> 中进行修改。
原文地址: https://www.cveoy.top/t/topic/l0w7 著作权归作者所有。请勿转载和采集!