自定义JavaScript确认对话框

Question

I have a function called showModalConfirmDialog that creates a custom javascript made dialog box with two buttons Yes/No and dims the background. Now in my functions I want to call that function like:

var outcome = showModalConfirmDialog('Are you sure?');

and I want to react depending on the button clicked;

if(outcome == true){
    // do something
} else {
    // do something else
}

The buttons return true/false. Javascript code:

button1.onclick = function(evt){
    return true;
};

button2.onclick = function(evt){
    return false;
};

I don't know what I am missing, any help would be appreciated. Thanks

Answer 1

You can't reproduce the behaviour of the native modal. Instead you could use callbacks.

This way :

function showModalConfirmDialog(msg, handler) {
    button1.onclick = function(evt){
        handler(true);
    };
    button2.onclick = function(evt){
        handler(false);
    };
}
showModalConfirmDialog('Are you sure?', function (outcome) { 
    alert(outcome ? 'yes' : 'no'); 
});

Or this way :

function showModalConfirmDialog(msg, confirmHandler, denyHandler) {
    button1.onclick = confirmHandler;
    button2.onclick = denyHandler;
}
showModalConfirmDialog(
    'Are you sure?', 
    function () { alert('yes'); }, 
    function () { alert('no'); }
);