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";
}())

如何保存对话窗口的位置

2 个答案: