正文

JavaScript设置alert参数：轻松掌握自定义弹窗标题与内容技巧

/0 浏览量
0412

在JavaScript中，alert() 函数是一个非常基础且常用的功能，用于显示带有指定消息和OK按钮的模态对话框。然而，默认的alert()弹窗只能显示简单的文本内容，没有标题和样式定制。别担心，通过一些小技巧，你可以轻松地为alert()弹窗添加标题和自定义样式。下面，就让我来带你一起探索这些技巧吧！

1. 使用自定义CSS样式

首先，我们可以通过添加自定义的CSS样式来美化弹窗。这需要一些额外的HTML和CSS代码，但效果会非常显著。

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义alert弹窗</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button onclick="customAlert('标题', '自定义内容')">点击显示自定义弹窗</button>
    <script src="script.js"></script>
</body>
</html>

CSS代码（styles.css）：

.alert-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    z-index: 1000;
    display: none;
}

.alert-box-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}

.alert-box-content {
    font-size: 16px;
    color: #666;
}

JavaScript代码（script.js）：

function customAlert(title, content) {
    var alertBox = document.createElement('div');
    alertBox.className = 'alert-box';
    alertBox.innerHTML = `
        <div class="alert-box-title">${title}</div>
        <div class="alert-box-content">${content}</div>
    `;
    document.body.appendChild(alertBox);
    
    setTimeout(function() {
        alertBox.style.display = 'block';
    }, 10);
    
    setTimeout(function() {
        alertBox.style.display = 'none';
        document.body.removeChild(alertBox);
    }, 3000);
}

2. 使用第三方库

如果你需要更复杂的弹窗效果，可以使用一些第三方库，如Bootstrap、jQuery UI等。这里以Bootstrap为例，展示如何使用它来自定义弹窗。

HTML代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap自定义alert弹窗</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <button onclick="bootstrapAlert()">点击显示Bootstrap弹窗</button>
    <div id="bootstrapAlert" class="alert alert-primary" role="alert">
        标题 <strong>自定义</strong> 内容
    </div>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

JavaScript代码：

function bootstrapAlert() {
    var alertElement = $('#bootstrapAlert');
    alertElement.show();
    setTimeout(function() {
        alertElement.hide();
    }, 3000);
}

通过以上两种方法，你可以轻松地为JavaScript中的alert()弹窗添加标题和自定义样式。希望这些技巧能帮助你更好地开发网页应用！

-- 展开阅读全文 --