HTML 点击文字弹出自适应居中弹窗代码示例 - 完整教程 - 常规

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 弹窗样式 */
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9999;
        }
<pre><code>    .popup-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
    }
    
    /* 文字点击样式 */
    .clickable-text {
        cursor: pointer;
        text-decoration: underline;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <p>点击下面的文字弹出弹窗：</p>
    <p class="clickable-text" onclick="showPopup()">点击弹窗</p>
<pre><code>&lt;div id=&quot;popup&quot; class=&quot;popup&quot;&gt;
    &lt;div class=&quot;popup-content&quot;&gt;
        &lt;h2&gt;这是一个弹窗&lt;/h2&gt;
        &lt;p&gt;这是弹窗的内容。&lt;/p&gt;
        &lt;button onclick=&quot;hidePopup()&quot;&gt;关闭弹窗&lt;/button&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
    function showPopup() {
        document.getElementById(&quot;popup&quot;).style.display = &quot;block&quot;;
    }
    
    function hidePopup() {
        document.getElementById(&quot;popup&quot;).style.display = &quot;none&quot;;
    }
&lt;/script&gt;
</code></pre>
</body>
</html>