Menu
confirm() method, which contains the confirmation message string, ok, and cancel button. The programmer can't change the confirm box style and button label if they use the default confirm box.
You can create a JavaScript confirmation box that offers yes and no options by using the confirm() method. The confirm() method will display a dialog box with a custom message that you can specify as its argument.
Selenium has multiple APIs to handle alerts with an Alert interface. To click on the Ok button on alert, first of all we have to switch to alert with switchTo(). alert() method. Next, to click on the Ok button, we have to use accept() method.
Add hidden div aligned with your elements and show the message on hidden div's instead of alert box.
In an attempt to solve a similar situation I've come across this example and adapted it. It uses JQUERY UI Dialog as Nikhil D suggested. Here is a look at the code:
HTML:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input type="button" id="box" value="Confirm the thing?" />
<div id="dialog-confirm"></div>
JavaScript:
$('#box').click(function buttonAction() {
$("#dialog-confirm").html("Do you want to do the thing?");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Do the thing?",
height: 250,
width: 400,
buttons: {
"Yes": function() {
$(this).dialog('close');
alert("Yes, do the thing");
},
"No": function() {
$(this).dialog('close');
alert("Nope, don't do the thing");
}
}
});
});
$('#box').click(buttonAction);
I have a few more tweaks I need to do to make this example work for my application. Will update this if I see it fit into the answer. Hope this helps someone.
You cannot do that with the native confirm() as it is the browser’s method.
You have to create a plugin for a confirm box (or try one created by someone else). And they often look better, too.
Additional Tip: Change your English sentence to something like
Really, Delete this Thing?
You can use jQuery UI Dialog.
These libraries create HTML elements that look and behave like a dialog box, allowing you to put anything you want (including form elements or video) in the dialog.
I shall try the solution with jQuery, for sure it should give a nice result. Of course you have to load jQuery ... What about a pop-up with something like this? Of course this is dependant on the user authorizing pop-ups.
<html>
<head>
<script language="javascript">
var ret;
function returnfunction()
{
alert(ret);
}
</script>
</head>
<body>
<form>
<label id="QuestionToAsk" name="QuestionToAsk">Here is talked.</label><br />
<input type="button" value="Yes" name="yes" onClick="ret=true;returnfunction()" />
<input type="button" value="No" onClick="ret=false;returnfunction()" />
</form>
</body>
</html>
"Confirm" in Javascript stops the whole process until it gets a mouse response on its buttons. If that is what you are looking for, you can refer jquery-ui but if you have nothing running behind your process while receiving the response and you control the flow programatically, take a look at this. You will have to hard-code everything by yourself but you have complete command over customization. https://www.w3schools.com/howto/howto_css_modals.asp
Built a tiny, confirm-like vanilla js yes / no dialog.
https://www.npmjs.com/package/yesno-dialog
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With