如何保存对话框窗口的位置

How to save the position of the dialog window

本文关键字：对话框 窗口 位置 保存 何保存      更新时间：2023-09-26

有没有办法保存打开的dialog窗口的当前位置，这样当我把它拿回来时，它就会回到最后一个位置。这是我的小提琴：http://jsfiddle.net/ZSk6L/935/正如你所看到的，最小化后，窗口下降，但如果我最大化，它会到达一个设定的位置和高度。有什么解决方案可以告诉dialog框屏幕上的上一个位置？

这只是你的代码的一个技巧，可能会对你有所帮助，即使你拖动它，它也会保存位置：

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

我会向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";
}())
相关文章：