javascriptconfirmcancel

Javascript's confirm and cancel function means that when the user performs certain operations on the website, a dialog box pops up to prompt the user whether to confirm the operation or cancel. This function is widely used in website development, such as deletion operations, form submission, etc. This article will introduce in detail how to use Javascript to implement the confirmed cancellation function.

1. What is the confirm and cancel function

The confirm and cancel function (Confirm) is a prompt box that pops up when the user performs certain operations, prompting the user whether to confirm or cancel the operation. It generally has two buttons, "OK" and "Cancel", and the user can click one of the buttons as needed. The OK button will perform the operation, while the Cancel button will not perform the operation and just closes the prompt box.

2. How to use Javascript to implement the confirmed cancellation function

The confirm method in Javascript can implement the confirmed cancellation function. This method pops up a prompt box and the user can click the OK or Cancel button. This method returns true when the user clicks the OK button and false when the user clicks the Cancel button.

The following is a sample code that uses Javascript to implement the confirmed cancellation function:

<script>
function deleteBlog() {
    // 弹出对话框
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        // 用户点击了确定按钮
        // 执行删除操作
        alert("删除成功！");
    } else {
        // 用户点击了取消按钮
        // 不执行删除操作
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

In this sample code, we define a function named deleteBlog, which is called when the button is clicked. The deleteBlog function pops up a prompt box asking the user if he is sure to delete this blog. If the user clicks the OK button, the function will perform the delete operation; if the user clicks the Cancel button, the function will not perform the delete operation.

3. Customized prompt box

The prompt box that pops up in the confirm method of Javascript is relatively simple and cannot meet complex needs. We can achieve a more beautiful and flexible prompt box by customizing the prompt box.

Customizing the prompt box is actually to define an HTML element, display it on the page, and use CSS styles to control its appearance and style on the page. Then in Javascript, use event triggers to control the display and hiding of the prompt box.

For example, the following is a prompt box customized using CSS:

<div class="confirm" id="confirmDiv">
    <div class="confirm-title">是否确定删除？</div>
    <div class="confirm-btns">
        <button class="confirm-btn" id="okBtn">确定</button>
        <button class="confirm-btn" id="cancelBtn">取消</button>
    </div>
</div>

<script>
var confirmDiv = document.getElementById("confirmDiv");
var okBtn = document.getElementById("okBtn");
var cancelBtn = document.getElementById("cancelBtn");

function deleteBlog() {
    // 显示提示框
    confirmDiv.style.display = "block";
    
    // 取消按钮点击事件
    cancelBtn.onclick = function() {
        confirmDiv.style.display = "none";
    }
    
    // 确定按钮点击事件
    okBtn.onclick = function() {
        confirmDiv.style.display = "none";
        // 执行删除操作
        alert("删除成功！");
    }
}
</script>

<button onclick="deleteBlog()">删除博客</button>

In this sample code, we define a DIV element named confirmDiv and hide it in the page. When the user clicks the delete blog button, we use Javascript to control the display of confirmDiv. At the same time, we added corresponding event triggers to the OK button and Cancel button, so that when the user clicks the button, the corresponding operation can be performed. It should be noted that our event binding for the button is in the deleteBlog function rather than when the page is loaded. This can reduce event binding when the page is loaded and improve page performance.

4. Callback function

The confirm and cancel function of Javascript is generally synchronous, that is, after the user clicks the confirm or cancel button in the prompt box, the operation will be executed immediately. But sometimes, the operation performed by the user takes some time, then we need to use the callback function.

The callback function allows us to put long-running operations into execution after the prompt box is closed, so as not to block other operations on the page. For example, the following is a sample code that uses a callback function to implement the confirmed cancellation function:

function deleteBlog(callback) {
    var r = confirm("确定要删除这篇博客吗？");
    if (r == true) {
        setTimeout(function() {
            // 执行删除操作
            callback(true);
        }, 1000); // 延迟1秒执行删除操作
    } else {
        callback(false);
    }
}

deleteBlog(function(result) {
    if (result) {
        alert("删除成功！");
    } else {
        alert("删除失败！");
    }
});

In this sample code, we define a function named deleteBlog, which accepts a callback function as a parameter. When the user clicks the OK button, the deleteBlog function will delay the deletion operation for 1 second, call the callback function after the deletion operation is completed, and pass the execution result to the callback function. When the user clicks the cancel button, the deleteBlog function directly executes the callback function and passes the execution result to it. In this example, we use the alert method to display the deletion result. Of course, you can also return the deletion result to the function caller so that it can take different actions based on the deletion result.

5. Summary

This article introduces in detail the implementation method of Javascript's confirmation cancellation function. First, we introduced the basic concepts and principles of the confirmed cancel function, then explained how to use Javascript to implement the confirmed cancel function, and gave an example of using CSS to customize the prompt box. Finally, we explained the concept and usage of callback functions. The confirm-cancel function is widely used in website development. It can not only improve user experience, but also protect user data and website security.

The above is the detailed content of javascriptconfirmcancel. For more information, please follow other related articles on the PHP Chinese website!