SimpleModal Override：URLリダイレクトの代わりにtrueまたはfalseを返すようにコールバックを希望します

Question

こんにちは、私はjquery初心者ですし、simplemodalプラグインを使用しようとしています。この試みの前に私のコードはsimplemodalデモは、URLのリダイレクトを行う

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

ました。デフォルトの確認ボタンが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

ステップ：confirm.jsで）

1）いいえ]ボタン

2からsimplemodalクローズを削除、変更

：：へ

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

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

：confirm.js、変化も

// 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("Continue to the SimpleModal Project page?", function (response) { 
    // do whatever you need to do with response 
}); 

お役に立てば幸いです。

-eric

Answer 2

私はJavaScriptのデフォルトの確認を変更する簡単なスクリプトを作った。あなたはまた、その変更ができ

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

：願っていますこれは... 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")); 
} 

そして、ここでは簡単なスクリプトを:)のためのコールバックの

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

関数の作品ですデフォルトのアラートまたはプロンプトを表示します。最後は...あなたはその確認のためのCSSを構築する必要があります:)