请写一个html点击文字弹出div弹窗的代码要求要有设置弹窗宽度和高度的并且要求不管宽度和高度有多大都要自适应居中垂直水平居中的代码

日期: 2027-02-21 00:22:17

标签: 科技

可以使用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">中进行修改。

请写一个html点击文字弹出div弹窗的代码要求要有设置弹窗宽度和高度的并且要求不管宽度和高度有多大都要自适应居中垂直水平居中的代码

原文地址: https://www.cveoy.top/t/topic/i7nv 著作权归作者所有。请勿转载和采集!