jQuery Dialog, wie bindet man ein Fenster resize Event, aber nur während das Dialog existiert

Question

Ich benutze den modalen Dialog von jQuery UI. Ich möchte, dass der Dialog fest in der Mitte des Bildschirms positioniert wird und die Größe des Browsers für die Position geändert wird, die automatisch aktualisiert werden soll. Es stellt sich heraus, dass dies standardmäßig nicht verfügbar ist.

Also, was ich getan habe, ist:

dialog = $('<div id="dialog-content" class="ui-dialog-container"></div>').html('<div class="loading">Loading...</div>').dialog({ 
    autoOpen: true, 
    position: ['center', 130], 
    open: function() { 

     // Fixed Positioning 
     $('.ui-dialog').css({position:"fixed"}); 

     // Reposition on Window Resize 
     $(window).resize(function() { 
      console.log('resizing); 
      $('.ui-dialog').dialog("option", "position", "center"); 
     }); 


    } 
}); 

Beachten Sie die:

  console.log('resizing); 

Das Problem hierbei ist, dass während dieser Arbeit, s, wenn der Dialog der Redimensionierung Ereignis noch geschlossen ist feuert. Wie kann ich dies zu einer Bindung machen, die mit dem Dialog verknüpft ist, so dass bei Zerstörung des Dialogs auch die Bindung zerstört wird?

Dank

Answer 1

Sie haben das Resize-Ereignis entbinden, wenn der Dialog geschlossen wird:

.dialog({ 
    ..., 
    open: function() { 
     ... 
     $(window).bind('resize.dlg', function() { 
      ... 
     }); 
    } 
    close: function() { 
     $(window).unbind('resize.dlg'); 
    } 
}); 

Answer 2

Fügen Sie diese auf Ihrem Dialogmöglichkeiten:

close:function(){ 
    $(window).unbind('resize'); 
}