закрытие диалогового окна jquery-ui по одному за раз

Question

У меня проблема с несколькими диалоговыми окнами интерфейса jQuery. Я хочу, чтобы у меня было несколько диалогов, и щелчок по кнопке с классом «.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); 

Таким образом, в сущность; Я определил событие в родительском окне («close-dialog»), которое может вызываться кодом внутри iframe, который будет вызывать $ dialog.dialog ('close'); Это работает блестяще; Я могу создать несколько диалогов, даже из-за диалогов, но проблема в том, что когда я нажимаю button.close-dialog, он закрывает все моих диалогов.

Есть ли способ определить, из какого диалога было вызвано событие? Или привязать событие к текущему диалоговому окну?

Answer 1

Вы можете использовать опцию jquery modal.

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

Это должно сделать это для всех ваших модалов за один раз, а созданные ими кнопки применимы только к ним. Надеюсь, это поможет!