如果调整高度，则模式弹出窗口适合浏览器视图 [英] modal pop up window to fit within browser view if resize height

问题描述

我已经去了本教程来做一个模态弹出窗口，对于我需要做的事情来说似乎很不错.但是，我想知道是否有人可以帮助我确定更改对话框所需的计算，以便在您调整浏览器大小时会出现该对话框.本教程很好，因为如果您调整浏览器的大小(沿宽度方向)，则该框将跟随并进入中间.但是，如果它是高度的话，它就不会.

I've went to this tutorial to do a modal pop up window, and it seems pretty nice for what I need to do. However, I was wondering if someone can help me figure out what I need to calculate to change the dialog box so it'll follow whenever you resize the browser. This tutorial is good because if you resize the browser (width-wise), the box will follow and go into the middle. But if it is height-wise, it wont.

教程:我认为这与这些代码有关:

I'm thinking it has to do with these codes :

    // get the screen height and width  
var maskHeight = $(document).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment
var dialogTop =  (maskHeight/3) - ($('#dialog-box').height()/3);  
var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

// assign values to the overlay and dialog box
$('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

我尝试使用$(window).height()，但是我也不认为这可行.我试图模仿宽度样式，因为它可以工作，但似乎不能与高度一起工作?有人可以帮我吗?

I've tried to use $(window).height() but I don't think that works either. I tried to mimic the width styles because that one works, but it doesn't seem to work with height? Can someone help me with this?

谢谢！

推荐答案

尝试一下

正在工作 演示 .您可以调整窗口的大小，然后尝试将对话框自动重新放置在中心位置.

Working demo. You can resize the window and try it re positions the dialog box automatically into center.

$(function(){
    $(window).resize(function(){
    // get the screen height and width  
    var maskHeight = $(window).height();  
    var maskWidth = $(window).width();

    // calculate the values for center alignment
    var dialogTop =  (maskHeight  - $('#dialog-box').height())/2;  
    var dialogLeft = (maskWidth - $('#dialog-box').width())/2; 

    // assign values to the overlay and dialog box
    $('#dialog-overlay').css({ height:$(document).height(), width:$(document).width() }).show();
    $('#dialog-box').css({ top: dialogTop, left: dialogLeft, position:"fixed"}).show();
    }).resize();
});

这篇关于如果调整高度，则模式弹出窗口适合浏览器视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！