Customise button labels on JavaScript "confirm" dialog

Question

I have tried these code for displaying yes or no command as pop-up icon.But it is displaying ok and cancel button.If anybody can suggest me an idea would be helpful for my project.I have added my code below

<script type = "text/javascript">
function Confirm() {
    var confirm_value = document.createElement("INPUT");
    confirm_value.type = "hidden";
    confirm_value.name = "confirm_value";
    if (confirm("Do you want to block hour?")) {
        confirm_value.value = "Yes";
    } else {
        confirm_value.value = "NO";
    }
    document.forms[0].appendChild(confirm_value);
}

This might help: http://stackoverflow.com/questions/9334636/javascript-yes-no-alert — Ben, May 27 '15 at 04:55
You can not change the label of buttons..Your code works as expected.. — Rayon, May 27 '15 at 04:56
I suggest you look into one of the many available 3rd party solutions. The top Google result is http://bootboxjs.com/examples.html — Phil, May 27 '15 at 04:57
@Ben Still, this question is basically a duplicate of that one and there's plenty of good answers there. Voting to close — Phil, May 27 '15 at 05:01
here's another 3rd party, if you don't want to create one by hand http://jqueryui.com/dialog/#modal-confirmation — Daemedeor, May 27 '15 at 05:04

score 0 · Answer 1 · answered May 27 '15 at 05:00

0

The browsers' API doesn't support custom buttons. OK and Cancel are the only buttons you can get.

If you want custom popup buttons you can use a library to make the popup like alertify.

answered May 27 '15 at 05:00

Atrotors

765
2
7
25

Keval Bhatt · Accepted Answer · 2015-05-27T06:07:26.167

You have to create your own confirmBox,it is not possible to change the buttons in the dialog displayed by the confirm function.

see this example: http://jsfiddle.net/kevalbhatt18/tr6k43ca/

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}

Call it by your code:

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

EDIT

I created JavaScript confirmBox

Example: http://jsfiddle.net/kevalbhatt18/qwkzw3rg/1/


<div id="id_confrmdiv">confirmation
    <button id="id_truebtn">Yes</button>
    <button id="id_falsebtn">No</button>
</div>

<button onclick="doSomething()">submit</button>

Script:

<script>

function doSomething(){
document.getElementById('id_confrmdiv').style.display="block"; //this is the replace of this line


document.getElementById('id_truebtn').onclick = function(){
   //do your delete operation
    alert('true');
};

document.getElementById('id_falsebtn').onclick = function(){
     alert('false');
   return false;
};
}
</script>

CSS:

body { font-family: sans-serif; }
#id_confrmdiv
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#id_confrmdiv .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#id_confrmdiv .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

i think you have to use jquery or javascript-ui alternative. and for above example you have to include jquery in your project — Keval Bhatt, May 27 '15 at 05:52

score 0 · Answer 3 · answered May 27 '15 at 05:02

according to me you cannot change the standard javascript pop-up button labels. In case you want to do so, you can use the jquery-ui or you can create your own custom pop-up and check for the button clicks. This is a better way rather than using the default pop-up as the UI varies from browser to browser.

Customise button labels on JavaScript "confirm" dialog

3 Answers3