SimpleModal Confirm Override: хотел бы, чтобы обратный вызов возвращал true или false вместо перенаправления URL - PullRequest
Новая
       8

SimpleModal Confirm Override: хотел бы, чтобы обратный вызов возвращал true или false вместо перенаправления URL

1 голос
/ 22 января 2011

Привет, я новичок в jquery и пытаюсь использовать плагин simplemodal.До этой попытки мой код был 

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

Демонстрация simplemodal выполняет перенаправление 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;
}

Ответы [ 2 ]

2 голосов
/ 28 января 2011

Шаги, чтобы сделать эту работу:

1) Удалите simplemodal-close из кнопки Нет

2) В Подтвердите.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) Также в файле verify.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
});

Надеюсь, это поможет.

-Эрик

1 голос
/ 01 апреля 2012

Я сделал простой скрипт для изменения подтверждения по умолчанию в 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 для этого подтвердите:)

...