📅  最后修改于: 2023-12-03 15:02:23.225000             🧑  作者: Mango
在开发 web 应用程序时,我们经常需要进行数据删除操作。删除可能会由用户意外或不小心发生,因此我们希望在删除之前提示用户确认是否要执行操作。JS 可以帮助我们实现此目的。
我们可以使用 JS 创建一个确认对话框,询问用户是否确实要删除数据。如果用户点击“确定”按钮,则执行删除操作;否则取消操作。
为了使确认对话框看起来更美观,我们可以使用 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;
}
以下代码实现一个简单的确认对话框,它将提示用户是否要删除数据。
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();
});
通过以上代码,我们可以在删除数据前提示用户进行确认,保护了数据的完整性,提高了用户体验。