js怎么写div实现弹出确认框效果？

发布人：慈云数据-客服中心发布时间：2024-08-03 08:20 阅读量：351

js怎么写div实现弹出确认框效果

引言

在Web开发中，弹出确认框是一种常见的交互方式，用于在执行某些操作前向用户确认。传统的JavaScript confirm() 函数虽然简单，但样式和功能都较为有限。通过使用HTML和CSS结合JavaScript，我们可以创建一个更加美观和功能丰富的自定义弹出确认框。

弹出确认框的实现步骤

1. HTML结构

首先，我们需要在HTML中定义弹出确认框的容器和内容。



    
        你确定要执行这个操作吗？

2. CSS样式

接下来，我们为弹出框添加一些基本的样式，使其在页面上更加显眼。

.confirm-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.confirm-content {
    text-align: center;
}

.confirm-content button {
    margin: 10px 5px;
    padding: 5px 15px;
    cursor: pointer;
}

3. JavaScript逻辑

最后，我们使用JavaScript来控制弹出框的显示和隐藏，以及处理用户的点击事件。

// 显示弹出框
function showConfirmBox() {
    document.getElementById('confirmBox').style.display = 'block';
}

// 隐藏弹出框
function hideConfirmBox() {
    document.getElementById('confirmBox').style.display = 'none';
}

// 确定按钮事件
document.getElementById('confirmYes').addEventListener('click', function() {
    // 执行确定操作
    console.log('用户点击了确定');
    hideConfirmBox();
});

// 取消按钮事件
document.getElementById('confirmNo').addEventListener('click', function() {
    // 执行取消操作
    console.log('用户点击了取消');
    hideConfirmBox();
});