SimpleModal 确认覆盖：希望回调返回 true 或 false，而不是 URL 重定向

Question

你好，我是一个 jquery 新手，正在尝试使用 simplemodal 插件。在此尝试之前，我的代码是

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

Simplemodal demo 进行 URL 重定向。我想像默认确认按钮那样返回 true 或 false。

这可能吗？

当我尝试此操作时（请参阅下面的代码），会弹出模式对话框，但它不会等待，而是在我可以单击任何内容之前继续执行底层按钮操作！

这就是我调用确认的方式：

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;
                // call the callback
                if ($.isFunction(callback)) {
                    callback.apply(this, jQuery.makeArray(isYes));
                }
                // close the dialog
                modal.close(); // or $.modal.close();

            });


        }
    });
    return isYes;
}

Answer 1

实现此操作的步骤：

1）从“否”按钮中删除 simplemodal-close

2）在confirm.js中，将：更改

// 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();
});

为：

// 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）也在confirm.js中，将：更改

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

为：

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

希望有所帮助。

-埃里克

Answer 2

我做了一个简单的脚本来修改 JavaScript 默认确认。希望这对你有用:)

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"));
}

这里有一个简单的脚本来调用确认...

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

回调函数：

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";
        }
    }
}

您还可以修改默认警报或提示。最后是...你需要构建 css 来确认:)