SimpleModal Confirm Override: Would like callback to return true or false instead of URL redirect

Hi I am a jquery newbie and trying to use the simplemodal plugin. Before this attempt my code was

isYes = confirm("Are you sure . . . "?); 
return isYes;

The simplemodal demo does a URL redirect. I would like to return true or false the way a default confirm button does.

Is this possible?

When I try this (Please see code below), the modal dialog pops up, but instead of waiting, it proceeds with the underlying button action before I can click anything!

This is how I call confirm:

confirm(confirm_message, function(isYes) { return isYes; });




function confirm(message, callback) {
    var isYes = false; 
    $('#confirm').modal({
        closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
        position: ["20%", ],
        overlayId: 'confirm-overlay',
        containerId: 'confirm-container',
        onShow: function(dialog) {
            var modal = this;

            $('.message', dialog.data[0]).append(message);

            // if the user clicks "yes"
            $('.yes', dialog.data[0]).click(function() {
                isYes = true;
         开发者_如何学C       // call the callback
                if ($.isFunction(callback)) {
                    callback.apply(this, jQuery.makeArray(isYes));
                }
                // close the dialog
                modal.close(); // or $.modal.close();

            });


        }
    });
    return isYes;
}

Steps to make this work:

1) Remove simplemodal-close from the No button

2) In confirm.js, change:

// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
    // call the callback
    if ($.isFunction(callback)) {
        callback.apply();
    }
    // close the dialog
    modal.close(); // or $.modal.close();
});

To:

// if the user clicks "yes"
$('.buttons div', dialog.data[0]).click(function () {
    var link = $(this);
    // call the callback
    if ($.isFunction(callback)) {
        callback.apply(this, [link.hasClass('yes') ? true : false]);
    }
    // close the dialog
    modal.close(); // or $.modal.close();
});

3) Also in confirm.js, change:

confirm("Continue to the SimpleModal Project page?", function () {
    window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});

To:

confirm("Continue to the SimpleModal Project page?", function (response) {
    // do whatever you need to do with response
});

Hope that helps.

-Eric

I Made a simple script to modify JavaScript default confirm. hope this is work for u :)

var CONFIRM_BUTTON_YES = "Ya";
var CONFIRM_BUTTON_NO = "Tidak";

if(document.getElementById) {
    window.confirm = function(title,txt,callback,parameter) {
    //title = your confirm title, txt = your message here, callback = call your function after u get result, parameter = ( optional ) for your function
    createCustomConfirm(title,txt,callback,parameter);
    }
}

function createCustomConfirm(title, txt,callback,parameter) {
    d = document;
    if(d.getElementById("modalContainer")) return;

    // create the modalContainer div as a child of the BODY element
    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";

    // make sure its as tall as it needs to be to overlay all the content on the page
    mObj.style.height = document.documentElement.scrollHeight + "px";

    // create the DIV that will be the alert 
    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.id = "alertBox";

    // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert
    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";

    // center the alert box
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
    $('#alertBox').css("display","none");

    // create an H1 element as the title bar
    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.id = "popup_title";
    h1.appendChild(d.createTextNode(title));

    // create a paragraph element to contain the txt argument
    msg = alertObj.appendChild(d.createElement("p"));
    msg.innerHTML = txt;

    // create an anchor element to use as the confirmation button.
    btn1 = alertObj.appendChild(d.createElement("a"));
    btn1.id = "closeBtn";
    btn1.appendChild(d.createTextNode(CONFIRM_BUTTON_YES));
    btn1.href = "#";

    btn2 = alertObj.appendChild(d.createElement("a"));
    btn2.id = "cancelBtn";
    btn2.appendChild(d.createTextNode(CONFIRM_BUTTON_NO));
    btn2.href = "#";

    $("#closeBtn").focus().select();
    $("#closeBtn, #cancelBtn").keypress( function(e) {
        if( e.keyCode == 13 ) $("#closeBtn").trigger('click');
        if( e.keyCode == 27 ) $("#cancelBtn").trigger('click');
    });

    try {
        $("#alertBox").draggable({ handle: $("#popup_title") });
        $("#popup_title").css({ cursor: 'move' });
    } catch(e) { /* requires jQuery UI draggables */ }

    // set up the onclick event to remove the alert when the anchor is clicked
    btn1.onclick = function() { removeCustom(); if( callback ) callback(true,parameter); }
    btn2.onclick = function() { removeCustom(); if( callback ) callback(false,parameter); }
    $('#alertBox').fadeIn();
}

// removes the custom from the DOM
function removeCustom() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}

And here a simple script to calling that confirm...

onclick="confirm('Just asking','go to facebook ?',gotofacebook,'login');"

Function for callback :

function gotofacebook(value,parameter) {
    if (value) {
        switch(parameter)
        {
        case 'login':
          window.location ="https://www.facebook.com/login.php";
          break;
        default:
          window.location ="https://facebook.com";
        }
    }
}

You also can modified that for default alert or prompt. the last is... u need to build css for that confirm :)