Как сохранить положение диалогового окна

Question

Есть ли способ сохранить текущее положение окна dialog, открывшегося таким образом, что, когда я верну его, он вернется в последнюю позицию. Это моя скрипка здесь: http://jsfiddle.net/ZSk6L/935/, как вы можете видеть, после минимизации окно опускается, но если я его максимизирую, он переходит в заданное положение и высоту. Любые решения, чтобы сообщить dialog в предыдущей позиции на экране?

Answer 1

Просто трюк с вашим кодом, может быть помочь вам, это позволит сэкономить место, даже если вы перетащите его:

<div id="window" data-top="" data-left="" data-height="">HEYYYY</div> 

$(document).ready(function(){ 
     var d = $('#window').dialog({ 
      draggable: true, 
      height: 200, 
      title: 'Results', 
      open: function(event, ui) { 
       $('#resultId').attr('data-top',$('.ui-dialog').css('top')); 
       $('#resultId').attr('data-left',$('.ui-dialog').css('left')); 
       $('#resultId').attr('data-height',$('.ui-dialog').css('height')); 
      }, 
      dragStop: function(event, ui) { 
       $('#resultId').attr('data-top',$('.ui-dialog').css('top')); 
       $('#resultId').attr('data-left',$('.ui-dialog').css('left')); 
       $('#resultId').attr('data-height',$('.ui-dialog').css('height')); 
      } 
     }).attr('id', 'resultId'); 

     var titlebar = d.parents('.ui-dialog').find('.ui-dialog-titlebar');  
     var min= $('<button/>', { 
       text: '-', 
       id: 'minButton', 
       click: function() { 
        var top = $('.ui-dialog').css('top'); 
        $('#resultId').parents('.ui-dialog').animate({ 
         height: '40px', 
         top: $(window).height() - 90 
        }, 50); 
       $(this).hide(); 
       $('#maxButton').show(); 
       } 
      }); 

     var max = $('<button/>', { 
       text: '+', 
       id: 'maxButton', 
       click: function() { 
        $('#resultId').parents('.ui-dialog').animate({ 
         //set the positioning to center the dialog - 200 is equal to height of dialog 
         top: $('#resultId').attr('data-top'), 
         left:$('#resultId').attr('data-left'), 
         height: $('#resultId').attr('data-height'), 
        }, 50); 
       $(this).hide(); 
       $('#minButton').show(); 
       } 
      }); 

     min.appendTo(titlebar).css({'margin-left':'50%','width':'30px'}); 
     max.appendTo(titlebar).css({'margin-left':'50%','width':'30px'}).hide(); 
    }); 

Answer 2

Я бы добавил слушателя событий к кнопке X, чтобы при щелчке я измерял .offsetLeft и .offsetTop элемента. Эти два свойства предоставят вам пространство между диалоговым окном и контейнером.

Что-то вроде:

var boxLeft; 
var boxTop; 
var box = document.querySelector(".ui-dialog"); 
var button = document.querySelector(".ui-dialog-titlebar-close"); 
button.addEventListener("click", function(){ 
    boxLeft = box.offsetLeft; 
    boxTop = box.offsetTop; 
}); 

(function whenTheBoxIsOpenedAgain(){ 
    box.style.left = boxLeft + "px"; 
    box.style.top = boxTop + "px"; 
}())