1

次のようなポップアップウィンドウを作成する必要があります： JavaScriptの
http://gyazo.com/48a138b2e40fda7e5e72acd1b653a518 。

管理者がDeleteリンクをクリックすると、1つのパラメーターがJavaScriptのクリック機能に渡されます。

さまざまなアクションを[OK]ボタンと[キャンセル]ボタンにバインドするにはどうすればよいですか？私の行動は以下のようなものです：

<a href="<c:url value="/Invalidate.do?val=INVALIDATE"/>">Logout</a>

誰かが私がこのコードを書くのを手伝ってもらえますか（完全なクリック機能）？このオンクリックを私のリンクに添付する方法も教えていただければ幸いです。

前もって感謝します

4

1 に答える 1

0

簡単なものにはwindow.confirmを使用できます。

すべてのJavaScriptのブロックを気にせず、スタイルを制御できない場合に機能します。

confirmとalertすべてのブラウザに組み込まれていますが、それらは非常に制限されており、通常、1回限りのブラウザ以外にはひどく良いアイデアではありません。

はるかに詳細な制御を行うには、ブートストラップからjquery uiダイアログやブートボックスなどを取り込む必要があります。これは単なるhtmlであるため、無限に柔軟性があります。ただし、問題のライブラリをすでに使用している場合を除いて、セットアップが面倒です。また、これらすべてがjavascriptの実行をブロックすることはありません。これもまた、はるかに強力で優れた「実践」ですが、人々、特に初心者にとっては頭を動かすのが困難です。

したがって、次のようなことができます（jQueryを想定）：

$('button[name=delete]').click(function() {
  if(window.confirm("You really sure?"))
     doDelete();
});

またはjQueryuiを使用する：

$('button[name=delete]').click(function() {
    $('<div>').text("You really sure?")  //Create a simple text element to be dialog'ed
        .dialog({
            buttons: {
                "Yes": function(){
                    doDelete()
                    $(this).dialog('close');
                }
                ,"No": function() { $(this).dialog('close'); }
        });
});

完全を期すために、冗長なコードを削除する巧妙な方法を次に示します。

$('button[name=delete]').click(function() {
    $('<div>').text("You really sure?")  //Create a simple text element to be dialog'ed
        .dialog({
            buttons: {
                "Yes": closeAnd(doDelete)
                ,"No": closeAnd()
        });
    function closeAnd(fn) {   //this function is automatically hoisted
        return function() {   //return a handler
             $(this).dialog('close');  //value of 'this' is determined by who invokes it               
             fn && fn();   //invoke fn if it was passed
        }
    }
});
于 2013-02-19T19:16:55.973 に答える