0

私がやろうとしていることを簡単に説明すると、モーダル メッセージを作成する簡単な方法を作ろうとしています。コードの繰り返しを減らそうとしています (すべてのダイアログを作成したくありません)。したがって、モーダルのタイトルとコンテンツとボタンを定義してから、関数 (doModal()) を呼び出すことができれば幸いです。

何らかの理由で、以下のコードはボタンを正しく渡しません (ボタンは表示されません)。単純modal.buttonsにこれに置き換えると：

{
                thisone: function(){
                    alert('you clicked this one');
                }
            }

それならうまくいくでしょう。しかし、ボタンを定義する簡単な方法はありません。これは、私がやろうとしていることとは逆です。

現在のコードは次のとおりです。

var modal = $('<div id="modal"><p></p></div>');
function doModal()
{
    var modal = $('<div id="modal"><p></p></div>');
    modal.text(modal.content);
    modal.attr('title', modal.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: modal.buttons
    });
}

$(document).ready(function(){
    modal.title = 'Are you sure?';
    modal.content = 'Are you sure? Deleting a product cannot be undone.';
    modal.buttons = {
            thisone: function(){
                alert('you clicked this one');
            }
        };
    doModal();
});
4

2 に答える 2

0

これが役立つかどうかはわかりません。モーダル ダイアログを表示する 'grow' jQuery ライブラリを作成しました。ボタンはありませんが、伸ばせると思います。ここにライブラリへのリンクがあります。

http://blog.bobcravens.com/2010/08/make-the-web-growl-using-jquery/

うまくいけば、これはあなたにいくつかのアイデアを与え、役に立ちます.

ボブ

于 2010-12-06T00:51:20.003 に答える
0

モーダルをグローバルと doModal() 内で 2 回定義します。

document.ready() で呼び出す関数内で、グローバル スコープで定義されたモーダルにボタンを割り当てます。しかし doModal() 内には、ボタンを割り当てないローカル定義変数 modal も存在します。

ready() 関数内で modal を定義し、 doModal() の引数として渡します。

function doModal(modal)
{ 
    modal.text(modal.content);
    modal.attr('title', modal.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: modal.buttons
    });
}

$(document).ready(function(){
    var modal = $('<div id="modal"><p></p></div>');
    modal.title = 'Are you sure?';
    modal.content = 'Are you sure? Deleting a product cannot be undone.';
    modal.buttons = {
            thisone: function(){
                alert('you clicked this one');
            }
        };
    doModal(modal);
});

または、動的オプションのみを doModal() に渡します。

function doModal(options)
{ 
    var modal = $('<div id="modal"><p></p></div>');
    modal.text(options.content);
    modal.attr('title', options.title);
    modal.dialog('destroy');
    modal.dialog({
        modal:true,
        resizable:false,
        draggable:false,
        buttons: options.buttons
    });
}

$(document).ready(function(){
    doModal(
            {
              title   :'Are you sure?',
              content :'Are you sure? Deleting a product cannot be undone.',
              buttons : {
                          thisone: function()
                                   {
                                      alert('you clicked this one');
                                   }
                        }
             }
           );
});
于 2010-12-06T01:16:11.907 に答える