怎么在js确认框中添加标题

在JavaScript确认框中添加标题的有效方法：使用自定义对话框、覆盖默认样式、利用HTML和CSS。

JavaScript的原生confirm()方法虽然简单易用，但功能有限，无法直接添加标题。为了实现这一需求，我们可以选择使用自定义对话框。这种方法不仅可以满足添加标题的需求，还能提供更丰富的样式和功能。以下是具体实现步骤和示例代码。

一、使用自定义对话框

1.1、创建HTML结构

首先，创建一个简单的HTML结构，用于显示自定义的确认框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Confirm Box</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="custom-confirm" class="hidden">
        <div class="confirm-box">
            <h2 id="confirm-title">Title</h2>
            <p id="confirm-message">Are you sure you want to proceed?</p>
            <button id="confirm-yes">Yes</button>
            <button id="confirm-no">No</button>
        </div>
    </div>
    <button id="show-confirm">Show Confirm Box</button>
    <script src="script.js"></script>
</body>
</html>

1.2、添加CSS样式

接下来，为自定义确认框添加一些基本的样式。

/* styles.css */
.hidden {
    display: none;
}
#custom-confirm {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.confirm-box {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.confirm-box h2 {
    margin-top: 0;
}

1.3、编写JavaScript代码

最后，编写JavaScript代码来控制自定义确认框的显示和隐藏。

// script.js
document.getElementById('show-confirm').addEventListener('click', function () {
    showCustomConfirm('Custom Title', 'Do you really want to continue?');
});
function showCustomConfirm(title, message) {
    var confirmBox = document.getElementById('custom-confirm');
    document.getElementById('confirm-title').innerText = title;
    document.getElementById('confirm-message').innerText = message;
    confirmBox.classList.remove('hidden');
    document.getElementById('confirm-yes').addEventListener('click', function () {
        confirmBox.classList.add('hidden');
        console.log('User confirmed');
    });
    document.getElementById('confirm-no').addEventListener('click', function () {
        confirmBox.classList.add('hidden');
        console.log('User cancelled');
    });
}

二、详细描述

2.1、HTML部分

在HTML部分，我们创建了一个包含标题、消息和两个按钮的div元素。这个div元素初始状态为隐藏（使用CSS类hidden）。点击“Show Confirm Box”按钮时，会显示自定义确认框。

2.2、CSS部分

CSS部分主要用于设置自定义确认框的样式。我们使用了position: fixed将确认框固定在屏幕中央，并添加了一些基础样式，使其看起来更美观。

2.3、JavaScript部分

JavaScript部分是核心逻辑所在。首先，我们定义了一个showCustomConfirm函数，该函数接受标题和消息作为参数，并将它们显示在自定义确认框中。点击“确认”或“取消”按钮时，确认框会隐藏，并在控制台中输出相应的消息。

三、扩展功能

3.1、添加动画效果

为了使自定义确认框更加美观，我们可以添加一些动画效果，例如淡入淡出效果。

/* styles.css */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
#custom-confirm.show {
    animation: fadeIn 0.5s forwards;
}
#custom-confirm.hide {
    animation: fadeOut 0.5s forwards;
}

// script.js
function showCustomConfirm(title, message) {
    var confirmBox = document.getElementById('custom-confirm');
    document.getElementById('confirm-title').innerText = title;
    document.getElementById('confirm-message').innerText = message;
    confirmBox.classList.remove('hidden');
    confirmBox.classList.add('show');
    document.getElementById('confirm-yes').addEventListener('click', function () {
        confirmBox.classList.add('hide');
        setTimeout(function() {
            confirmBox.classList.remove('show', 'hide');
            confirmBox.classList.add('hidden');
        }, 500);
        console.log('User confirmed');
    });
    document.getElementById('confirm-no').addEventListener('click', function () {
        confirmBox.classList.add('hide');
        setTimeout(function() {
            confirmBox.classList.remove('show', 'hide');
            confirmBox.classList.add('hidden');
        }, 500);
        console.log('User cancelled');
    });
}

3.2、使用第三方库

除了手动编写代码，我们还可以使用现成的第三方库，如SweetAlert2，来实现自定义对话框。该库提供了丰富的功能和美观的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SweetAlert2 Confirm Box</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
</head>
<body>
    <button id="show-confirm">Show Confirm Box</button>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
    <script>
        document.getElementById('show-confirm').addEventListener('click', function () {
            Swal.fire({
                title: 'Custom Title',
                text: 'Do you really want to continue?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes',
                cancelButtonText: 'No'
            }).then((result) => {
                if (result.isConfirmed) {
                    console.log('User confirmed');
                } else {
                    console.log('User cancelled');
                }
            });
        });
    </script>
</body>
</html>

四、总结

通过上述方法，我们可以轻松实现带有标题的自定义确认框。无论是手动编写代码还是使用第三方库，都能满足不同的需求和场景。自定义对话框不仅能提供更多功能，还能提升用户体验，使应用更加美观和实用。