如何使用簡單模式的動態確認彈出框

Question

我正在使用簡單的模型，這是一個非常整潔的代碼段，但我有一個要求，我無法弄清楚。

http://www.ericmmartin.com/simplemodal/

我使用的情況是，我希望在一個動作的用戶點擊後出現「確認彈出」第三選項。問題是在這個例子中，消息在js文件中被硬編碼。

我需要能夠傳遞此消息以及與「是」和「否」按鈕關聯的鏈接。

有人做過類似的事情。

Answer 1

查看頁面的源告訴你，你需要知道的一切。

<!-- Confirm --> 
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' /> 
<script src='js/confirm.js' type='text/javascript'></script> 

和

<div id='confirmDialog'><h2>Confirm Override</h2> 

    <p>A modal dialog override of the JavaScript confirm function. Demonstrates the use of <code>onShow</code> as well as how to display a modal dialog confirmation instead of the default JavaScript confirm dialog.</p> 
    <form action='download/' method='post'> 
     <input type='button' name='confirm' value='Demo' class='confirm demo'/><input type='button' name='download' value='Download' class='demo'/> 
     <input type='hidden' name='demo' value='confirm'/> 
    </form> 
</div> 
<div id='confirm' style='display:none'> 

    <a href='#' title='Close' class='modalCloseX simplemodal-close'>x</a> 
    <div class='header'><span>Confirm</span></div> 
    <p class='message'></p> 
    <div class='buttons'> 
     <div class='no simplemodal-close'>No</div><div class='yes'>Yes</div> 
    </div> 
</div> 

上面我們可以清楚地看到，該消息是所有的HTML，而不是在JavaScript的。

然後，如果我們再看看confirm.js的JS源代碼，那麼就如何初始化/觸發它而言，它們都已經放置在那裏。

/* 
* SimpleModal Confirm Modal Dialog 
* http://www.ericmmartin.com/projects/simplemodal/ 
* http://code.google.com/p/simplemodal/ 
* 
* Copyright (c) 2009 Eric Martin - http://ericmmartin.com 
* 
* Licensed under the MIT license: 
* http://www.opensource.org/licenses/mit-license.php 
* 
* Revision: $Id: confirm.js 185 2009-02-09 21:51:12Z emartin24 $ 
* 
*/ 

$(document).ready(function() { 
    $('#confirmDialog input.confirm, #confirmDialog a.confirm').click(function (e) { 
     e.preventDefault(); 

     // example of calling the confirm function 
     // you must use a callback function to perform the "yes" action 
     confirm("Continue to the SimpleModal Project page?", function() { 
      window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/'; 
     }); 
    }); 
}); 

function confirm(message, callback) { 
    $('#confirm').modal({ 
     close:false, 
     position: ["20%",], 
     overlayId:'confirmModalOverlay', 
     containerId:'confirmModalContainer', 
     onShow: function (dialog) { 
      dialog.data.find('.message').append(message); 

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

Answer 2

我會推薦BlockUI，這是我使用的。有了這個插件，它使用現有的<div>值來顯示消息。在觸發對話框觸發的事件中，您可以使用jQuery修改消息並通過正常的DOM操作鏈接文本，然後按照您的應用程序的要求顯示<div>。

jQuery BlockUI Plugin - Dialog Example

編輯 - 每下面的第一個評論。

<script type="text/javascript"> 
$(document).ready(function() { 

    $('#test').click(function() { 
     $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
    }); 

    $('#yes').click(function() { 
     // Remove the UI block. 
     $.unblockUI(); 
     // Or you could use window.open 
     window.location = "http://www.google.com"; 
    }); 

    $('#no').click(function() { 
     $.unblockUI(); 
     return false; 
    }); 
}); 

Answer 3

confirm.js中給出的代碼包含兩個方法定義。一種是稱爲confirm的通用方法，它將創建帶有要顯示的消息的模態彈出窗口。無論何時您想要創建模式彈出窗口，都必須使用此方法。

confirm("Are you sure you want to delete this item?", function() { 
    //Here you will write the code that will handle the click of the OK button. 
}); 

這裏，第二個參數是一個函數（它的工作原理幾乎就像C＃中的委託）。會發生什麼是confirm函數將顯示一個包含您的消息的對話框，並且當用戶單擊任何按鈕時，將調用作爲第二個參數傳遞的匿名函數。你也可以寫一個「正常」的功能，並把它作爲第二個參數給confirm -

function callbackHandler() { 
    //Here you will write the code that will handle the click of the OK button. 
} 

confirm("Are you sure you want to delete this item?", callbackHandler); 

你的函數將通過這一段代碼來調用 -

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

在這個例子中