jquery-uiダイアログを1つずつ閉じる

Question

複数のjQuery UIダイアログに問題があります。私が望むのは、複数のダイアログを持つことができ、 ".close-modal"クラスのボタンをクリックすると、そのボタンが配置されたダイアログだけが閉じられることです。さて、最初はちょっとした背景があります：サイトの "メイン"親に単純な関数があり、クラス ".modal"のリンクをクリックしてモーダルダイアログを開きます。親

function modal(href, title) { 
    var $dialog = $('<div></div>'); 
    $dialog.html('<iframe class="modal" name="' + title + '" style="border: 0px;" src="' + href + '" width="100%" height="100%"></iframe>'); 
    $dialog.dialog({ 
     autoOpen: false, 
     modal: true, 
     height: 650, 
     width: 950, 
     title: title 
    }); 


    $dialog.dialog('open'); 

    $(document).bind('close-dialog', function() { 
     $dialog.dialog('close'); 
    }); 
} 

$('a.modal').click(function(event) { 
    event.preventDefault(); 
    modal($(this).attr('href'), $(this).attr('title')); 
} 

このコードでは

は、私はそれがしたいように動作します。複数のダイアログが親の中に表示できるようにダイアログからダイアログを開くには、私は、正しいパラメータを持つ親ウィンドウのモーダル関数を呼び出す：

ダイアログ

で

(function($) { 
    $(document).ready(function() { 
     $('a.modal').click(function(event) { 
      event.preventDefault(); 
      parent.modal($(this).attr('href'), $(this).attr('title')); 
     } 

     /** Trigger the close-dialog event on the parent to close the current dialog. */ 
     $('.close-dialog').click(function() { 
      parent.jQuery(parent.document).trigger('close-dialog'); 
     }); 
    }); 
})(jQuery); 

ので、中にエッセンス; iframe内の$ dialog.dialog（ 'close'）を呼び出すコードで呼び出すことができる親ウィンドウ（ "close-dialog"）のイベントを定義しました。これはすごくうまくいく。ダイアログ内からでも複数のダイアログを作成できますが、一度button.close-dialogをクリックすると、ダイアログボックスのがすべて閉じるとなります。

イベントが呼び出されたダイアログを特定する方法はありますか？または、イベントを現在のダイアログにバインドしますか？

Answer 1

jqueryモーダルのボタンオプションを使用できます。

<script> 
$(function() { 
    $(".myModals").dialog({ 
     modal: true, 
     buttons: { 
      Close: function() { 
       $(this).dialog("close"); 
      } 
     } 
    }); 
}); 
</script> 

これは、すべてのモーダルで一度に実行する必要があります。作成するボタンは、自分自身にのみ適用されます。希望が助けてくれる！