是一种在前端开发中用于确认用户操作的函数。它不依赖于任何库或框架,可以直接在JavaScript代码中实现。
以下是一个简单的不带库的JavaScript自定义确认函数的示例:
function customConfirm(message, callback) {
// 创建确认对话框的容器元素
var confirmContainer = document.createElement('div');
confirmContainer.className = 'confirm-container';
// 创建确认消息元素
var messageElement = document.createElement('p');
messageElement.textContent = message;
confirmContainer.appendChild(messageElement);
// 创建确认按钮元素
var confirmButton = document.createElement('button');
confirmButton.textContent = '确认';
confirmButton.addEventListener('click', function() {
// 调用回调函数,传递确认结果为true
callback(true);
// 移除确认对话框
document.body.removeChild(confirmContainer);
});
confirmContainer.appendChild(confirmButton);
// 创建取消按钮元素
var cancelButton = document.createElement('button');
cancelButton.textContent = '取消';
cancelButton.addEventListener('click', function() {
// 调用回调函数,传递确认结果为false
callback(false);
// 移除确认对话框
document.body.removeChild(confirmContainer);
});
confirmContainer.appendChild(cancelButton);
// 将确认对话框添加到页面中
document.body.appendChild(confirmContainer);
}
// 使用示例
customConfirm('确定要删除这条记录吗?', function(result) {
if (result) {
// 用户点击了确认按钮
console.log('执行删除操作');
} else {
// 用户点击了取消按钮
console.log('取消删除操作');
}
});
这个自定义确认函数接受两个参数:确认消息和回调函数。在函数内部,创建了一个确认对话框的容器元素,并向其中添加了确认消息、确认按钮和取消按钮。点击确认按钮会调用回调函数,并传递确认结果为true;点击取消按钮会调用回调函数,并传递确认结果为false。确认对话框会被添加到页面中,用户可以根据需要进行确认操作。
这种自定义确认函数可以用于各种前端开发场景,比如在删除操作前确认用户意图、在提交表单前确认数据的正确性等。腾讯云提供的与此相关的产品是腾讯云前端部署相关服务,详细信息请参考腾讯云前端部署产品介绍:https://cloud.tencent.com/product/sfe。
领取专属 10元无门槛券
手把手带您无忧上云