js alert 字体大小

在JavaScript中，alert函数用于显示一个对话框，其中包含一条消息和一个“确定”按钮。然而，alert对话框的样式（包括字体大小）是由浏览器控制的，并且通常是不可自定义的。这是因为alert是一个同步的、模态的对话框，其设计目的是为了向用户显示重要信息，而不是为了展示复杂的样式或布局。

基础概念

alert函数：JavaScript内置函数，用于显示一个简单的对话框，包含一条消息和一个“确定”按钮。
模态对话框：用户必须与之交互（例如点击“确定”按钮）才能继续与页面交互的对话框。

优势

简单易用：无需任何额外的代码或库即可使用。
跨浏览器兼容：所有主流浏览器都支持alert函数。

类型

基本类型：只显示一条消息。
无其他类型：alert函数本身不支持其他类型的对话框。

应用场景

错误提示：当发生错误时，向用户显示错误信息。
确认操作：在执行某些操作前，向用户确认。

问题与解决方案

由于alert对话框的样式不可自定义，如果你需要一个具有自定义字体大小的对话框，可以考虑使用HTML和CSS来创建自定义对话框。

示例代码

以下是一个简单的自定义对话框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert</title>
    <style>
        .custom-alert {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            font-size: 18px; /* 自定义字体大小 */
            z-index: 1000;
        }
        .custom-alert-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
    </style>
</head>
<body>
    <div class="custom-alert-overlay" id="customAlertOverlay"></div>
    <div class="custom-alert" id="customAlert">
        <p>This is a custom alert with larger font size!</p>
        <button onclick="closeCustomAlert()">OK</button>
    </div>

    <script>
        function showCustomAlert() {
            document.getElementById('customAlert').style.display = 'block';
            document.getElementById('customAlertOverlay').style.display = 'block';
        }

        function closeCustomAlert() {
            document.getElementById('customAlert').style.display = 'none';
            document.getElementById('customAlertOverlay').style.display = 'none';
        }

        // 示例调用
        setTimeout(showCustomAlert, 1000);
    </script>
</body>
</html>