Looking to build a confirm box in jQuery with the option Yes/No? We will build a plugin by the help of confirming () function which will display a dialog box with the specified message.
The box will have two buttons OK and Canel. Also an additional button for help. Normally the confirm boxes used when you want a user to verify or accept something on the website.
If you don’t know, The confirm box takes the focus away from the current browser window and forces the browser to read the message.
It is important don’t overuse this confirm method because it will prevent the user from accessing the other parts of the website until the box is closed.
Additional, The confirm box method only returns two values which can be true if user click ok else it will false.
How to Create Confirm Box in Jquery with Options
We will use the Zebra Dialog plugin to create the confirm box and it comes with multiple features. It’s responsive and highly configurable for building beautiful modal dialog boxes.
The plugin helps you to create the box with yes and no option. It also supports the AJAX, iframes and inline HTML inline content to show in the box.
Furthermore, you can use the plugin fo confirmation, error, information prompt, question, and warning. To implement on your website, you need to follow the steps:
1. Load the jQuery and Zebra Dialog‘s assets (CSS and JavaScript files) into your HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Zebra Dialog CSS --> <link rel="stylesheet" href="dist/css/flat/zebra_dialog.min.css" type="text/css"> <!-- Zebra Dialog JS --> <script src="dist/zebra_dialog.min.js"></script>
2. Alternatively, you can also load Zebra Dialog plugin files from JSDelivr CDN.
<!-- Zebra Dialog CDN --> <script src="https://cdn.jsdelivr.net/npm/zebra_dialog@1.4.0/dist/zebra_dialog.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zebra_dialog@latest/dist/css/flat/zebra_dialog.min.css">
3. After loading all assets, create an HTML element (like button or something else) that will be used to trigger confirm dialog box.
<button id="my-button">Test</button>
4. Now, create a basic dialog box and initialize the plugin in jQuery document ready function.’
$(document).ready(function() {
$('#my-button').on('click', function(e) {
e.preventDefault();
new $.Zebra_Dialog('The Button was clicked!');
});
});5. To create confirm box with yes no option, use the following jQuery code.
new $.Zebra_Dialog(
"We can set as many buttons as we want and we can handle the user's choice though the callback " +
"function attached to the <strong>onClose</strong> event.<br><br>See the next example to handle " +
"user's choice in a different way.",
{
type: "question",
title: "Custom buttons",
buttons: ["Yes", "No", "Help"],
onClose: function(caption) {
// notice that we use the button's label to determine which button was clicked
// "caption" will be empty when the dialog box is closed by pressing ESC, by clicking the
// dialog box's close button, or by clicking the overlay
new $.Zebra_Dialog((caption != "" ? "\"" + caption + "\"" : "nothing") + " was clicked", {
auto_close: 2000,
buttons: false,
modal: false,
position: ["center", "center"]
});
}
}
);