シンプルなモーダルを使用してダイナミックな確認ポップアップを表示する方法

Question

シンプルなモデルを使用していますが、これは非常にすっきりしたコードですが、私には分かりません。

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

私のユースケースは、私がアクションをユーザーがクリックした後、「確認ポップアップ」をしたい3番目のオプションです。問題は、この例では、メッセージが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>値を使用してメッセージを表示します。ダイアログが起動すると、通常のDOM操作でjQueryを使用してメッセージとリンクテキストを変更し、アプリケーションが必要とするように<div>を表示することができます。

jQuery BlockUI Plugin - Dialog Example

EDIT - 下の最初のコメントあたり。ページのソースを見ると

<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のコードには、2つのメソッド定義が含まれています。一つは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. 
}); 

ここで、2番目の引数は関数です（これはC＃のデリゲートとほぼ同じです）。何が起こるかは、メッセージが入ったダイアログが表示され、ユーザーがボタンをクリックすると、2番目の引数として渡された無名関数が呼び出されるということです。また、「通常の」関数を記述し、confirmへの2番目の引数として渡すことができます - 何だろう、この例では

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