首页html弹窗字体不同颜色

html弹窗字体不同颜色

时间: 2023-07-11 22:36:10 浏览: 117

要让 HTML 弹窗中的文字显示不同的颜色，可以使用 CSS 样式来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗示例</title>
    <style>
        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <button onclick="showPopup()">点击弹出窗口</button>
    <div id="popup" style="display:none;">
        <p>这是一个弹出窗口</p>
        <p class="red">这段文字是红色的</p>
        <p class="blue">这段文字是蓝色的</p>
        <button onclick="hidePopup()">关闭</button>
    </div>
    <script>
        function showPopup() {
            document.getElementById("popup").style.display = "block";
        }
        function hidePopup() {
            document.getElementById("popup").style.display = "none";
        }
    </script>
</body>
</html>