How to Create a Dialog with “ok” and “cancel” Options

How to create a dialog with “Ok” and “Cancel” options

When developing web applications, it is common to encounter situations where you need to display a dialog box with “Ok” and “Cancel” options. This can be useful for confirming an action or allowing the user to make a decision. In this blog post, we will explore two different ways to create a dialog with “Ok” and “Cancel” options using JavaScript.

1. Using the Window.confirm() method

The Window.confirm() method displays a modal dialog box with a message and two buttons: “Ok” and “Cancel”. It returns a boolean value indicating whether the user clicked “Ok” (true) or “Cancel” (false).

if (window.confirm("Are you sure you want to delete this item?")) {
  // User clicked "Ok"
  console.log("Item deleted");
} else {
  // User clicked "Cancel"
  console.log("Deletion canceled");
}

2. Creating a custom dialog using HTML and CSS

If you want more control over the appearance and behavior of the dialog, you can create a custom dialog using HTML and CSS. Here’s an example:


  Are you sure you want to delete this item?

By using the above code, you can create a custom dialog with “Ok” and “Cancel” options. You can customize the appearance of the dialog by modifying the HTML and CSS as per your requirements.

These are two different ways to create a dialog with “Ok” and “Cancel” options using JavaScript. Choose the method that best suits your needs and enhance the user experience of your web applications.

How to Create a Dialog with “ok” and “cancel” Options