📜  js 在删除前确认是否 - CSS (1)

📅  最后修改于: 2023-12-03 15:02:23.225000             🧑  作者: Mango

JS 在删除前确认是否 - CSS

在开发 web 应用程序时,我们经常需要进行数据删除操作。删除可能会由用户意外或不小心发生,因此我们希望在删除之前提示用户确认是否要执行操作。JS 可以帮助我们实现此目的。

实现

我们可以使用 JS 创建一个确认对话框,询问用户是否确实要删除数据。如果用户点击“确定”按钮,则执行删除操作;否则取消操作。

CSS 样式

为了使确认对话框看起来更美观,我们可以使用 CSS 对其进行样式设置。

.confirmation {
    border: 1px solid #999;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    background-color: #fff;
    padding: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.confirmation p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

.confirmation .btn-confirm,
.confirmation .btn-cancel {
    background-color: #357ebd;
    color: #fff;
    padding: 5px 10px;
    border: none;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
}

.confirmation .btn-confirm:hover,
.confirmation .btn-cancel:hover {
    opacity: 0.9;
}
JS 代码

以下代码实现一个简单的确认对话框,它将提示用户是否要删除数据。

function confirmDelete() {
    let confirmation = document.createElement('div');
    confirmation.classList.add('confirmation');

    let p = document.createElement('p');
    p.textContent = 'Are you sure you want to delete?';

    let btnConfirm = document.createElement('button');
    btnConfirm.classList.add('btn-confirm');
    btnConfirm.textContent = 'Yes';

    let btnCancel = document.createElement('button');
    btnCancel.classList.add('btn-cancel');
    btnCancel.textContent = 'No';

    confirmation.appendChild(p);
    confirmation.appendChild(btnConfirm);
    confirmation.appendChild(btnCancel);
    document.body.appendChild(confirmation);

    btnConfirm.addEventListener('click', function() {
        deleteData();
        confirmation.remove();
    });

    btnCancel.addEventListener('click', function() {
        confirmation.remove();
    });
}

function deleteData() {
    // delete data here
}

let btnDelete = document.querySelector('.btn-delete');
btnDelete.addEventListener('click', function() {
    confirmDelete();
});
结论

通过以上代码,我们可以在删除数据前提示用户进行确认,保护了数据的完整性,提高了用户体验。