如果调整高度，模式弹出窗口将适合浏览器视图

发布于 2024-11-30 17:43:15 字数 913 浏览 4 评论 0原文

我已经阅读本教程来制作模式弹出窗口，这对于我需要做的事情来说似乎非常好。但是，我想知道是否有人可以帮助我弄清楚我需要计算什么来更改对话框，以便每当您调整浏览器大小时它都会跟随。本教程很好，因为如果您调整浏览器的大小（宽度方向），该框将跟随并进入中间。但如果是身高的话，那就不行了。

教程：此处

我认为这与这些代码有关：

    // 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 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.

Tutorial : Here

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

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?

Thank you!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

尸血腥色 2024-12-07 17:43:15

尝试这个

工作演示。您可以调整窗口大小并尝试将对话框自动重新定位到中心。

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

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

回复收藏 0 原文

~没有更多了~