无论屏幕分辨率如何，我如何居中javascript css弹窗div ?

I have the following code that opens a new popup window while disabling the background, the problem is that I have to position this so that it's 100px from the top (already got that through the CSS #dialog) and also in the center of the screen, no matter what the user's resolution is?

我有下面的代码,打开一个新弹出窗口同时禁用背景,问题是,我必须位置这样100 px从顶部(已经通过了CSS #对话框),在屏幕的中心,无论用户的决议是什么吗?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <script type="text/javascript">
        function showPopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "block"
            dlg.style.display = "block"
            if (document.body.style.overflow = "hidden") {
                cvr.style.width = "1024"
                cvr.style.height = "100%"
            }
        }
        function closePopUp(el) {
            var cvr = document.getElementById("cover")
            var dlg = document.getElementById(el)
            cvr.style.display = "none"
            dlg.style.display = "none"
            document.body.style.overflowY = "scroll"
        }
    </script>
    <style type="text/css">
        #cover {
            display:        none;
            position:       absolute;
            left:           0px;
            top:            0px;
            width:          100%;
            height:         100%;
            background:     gray;
            filter:         alpha(Opacity = 50);
            opacity:        0.5;
            -moz-opacity:   0.5;
            -khtml-opacity: 0.5
        }

        #dialog {
            display:    none;
            left:       100px;
            top:        100px;
            width:      300px;
            height:     300px;
            position:   absolute;
            z-index:    100;
            background: white;
            padding:    2px;
            font:       10pt tahoma;
            border:     1px solid gray
        }
    </style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
    My Dialog Content
    <br><input type="text">
    <br><input type="button" value="Submit">
    <br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>

</body>
</html>

7 个解决方案

#1

CSS based solution to center:

基于CSS的中心解决方案:

You need to use these styles to make it appear dead-center:

你需要使用这些风格，使它看起来毫无中心:

position:absolute;
top:50%;
left:50%;
width:400px;  /* adjust as per your needs */
height:400px;   /* adjust as per your needs */
margin-left:-200px;   /* negative half of width above */
margin-top:-200px;   /* negative half of height above */

So position should be specified. The top and left should be 50%. The margin-left and margin-top should be negative one half of the width and height of the box respectively.

所以位置应该被指定。顶部和左边应该是50%边距和边距分别为框的宽度和高度的负二分之一。

Notice that if you want your popup to appear on center even when page is scrolled you will have to use position:fixed instead with the draw back that it doesn't work in IE6.

注意，如果你想让你的弹出窗口显示在中间，即使页面被滚动，你也必须使用position:fixed，而不是draw back，它在IE6中不工作。

#2

What you need is called a light-box.

你需要的是一个灯箱。

To create it you should modify HTML,CSS and JS code.

要创建它，您应该修改HTML、CSS和JS代码。

Let's say your lightbox consist only of the string "login form". (You can put everything you want there) The HTML code should look like this:

假设你的lightbox只包含字符串“login form”。(你可以把你想要的东西都放在那里)HTML代码应该是这样的:

<div id = "loginBox">login form</div>

Now, we need to hide it with CSS:

现在，我们需要用CSS来隐藏它:

div#loginBox {
    display: none;
}

Now our box is not visible. Lets modify our box as you want it to be 100px from the top:

现在我们的盒子不可见了。让我们修改我们的盒子，因为你希望它从顶部100px:

div#loginBox {
    display: none;
    top: 100px;
}

We will worry about disabling the background later.

稍后我们将担心禁用背景。

Our next job is to make a button that will display the box when we need it. Easy-peasy:

我们的下一个任务是做一个按钮，当我们需要时，它会显示盒子。非常简单:

<div id = "loginBox" >login form</div>
<a id = "displayButton">login</a>

Note that we don't need the "href" attribute, because that will move the screen on clicking and other unwanted behavior.

注意，我们不需要“href”属性，因为它会在点击和其他不需要的行为上移动屏幕。

Let's attach event handler on the button via JS:

让我们通过JS在按钮上附加事件处理器:

var IE = document.all ? true : false; // obligatory "browser sniffing"

function display_box() {
    document.getElementsById("loginBox").style.display = "inline-block"; // or "inline" 
}

window.onload = function() {
    var login_box = document.getElementsById("loginBox");
    if (!IE) {
        login_box.addEventListener( "click", display_box , false );
    }
    else {
        login_box.attachEvent( "onclick", display_box );
    }
}

But you want it to be in the center of the screen? Then the function goes like this:

但是你想让它在屏幕的中心?函数是这样的

function display_box() {
    var theBox = document.getElementsById("loginBox").style,
        left = document.width / 2 - 50;   // 150 because it is 300 / 2

    theBox.display = "inline-block";
    theBox.left = left.toString() + "px";
}

I would guess that you will want to close the window at some point and make the "disabled background" effect. To do so you can create a div class that extends on the whole screen, attach a "display" event on it, put some z-index in the css to be sure the loginBox is over the "disabled background", and attach a "close the loginBox" event on the "background" div. And now the final code looks like this:

我猜你会想在某个时候关闭窗口，使“禁用背景”效果。这样做你可以创建一个div类扩展了整个屏幕上,把“显示”事件,把一些css可以肯定loginBox z - index是“禁用背景”,并附上“关闭loginBox”事件的“背景”div。现在最后的代码是这样的:

Note that we care only about the placement of the login-button, because the other are hidden from view, and then modified by JS:

注意，我们只关心登录按钮的位置，因为另一个隐藏在视图之外，然后由JS修改:

HTML:

<div id = "loginBox" >login</div>
<a id = "displayButton">login</a>
<div id = "backgroundDarkener"> </div>

CSS:

div#loginBox {
    display: none;
    top: 100px;
    width: 300px; #it is important to know the width of the box, to center it correctly
    z-index: 2;
}
div#backgroundDarkener {
    background: #000;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8; 
    # needless to say, you should play with opacity or if you want your
    # css to validate - background image (because I suspect it won't 
    # validate for old versions of IE, Safari, etc.) This is just a suggestion
}

JS:

var IE = document.all ? true : false; // obligatory "browser sniffing"

function display_box() {
    var theBox = document.getElementsById("loginBox").style,
        background = document.getElementsById("loginBox").style,
        left = document.width / 2 - 150;   // 150 is 300 / 2

    theBox.display = "inline-block";
    theBox.left = left.toString() + "px";
    background.display = "inline-block";
}
function hide_box() {
    document.getElementsById("loginBox").style.display = "none";
    document.getElementsById("backgroundDarkener").style.display = "none"; 
}

window.onload = function() {
    var login_box = document.getElementsById("loginBox"),
        background = document.getElementsById("backgroundDarkener");

    if (!IE) {
        login_box.addEventListener( "click", display_box , false );
        background.addEventListener( "click", hide_box , false );
    }
    else {
        login_box.attachEvent( "onclick", display_box );
        background.attachEvent( "onclick", hide_box );
    }
}

#3

A quick Google search found this;

快速搜索谷歌找到了这个;

function PopupCenter(pageURL, title,w,h) {
  var left = (screen.width/2)-(w/2);
  var top = (screen.height/2)-(h/2);
  var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

}

#4

This is where flexbox comes rescue now!

这就是flexbox拯救人类的地方!

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

#5

Simple, margin: 100px auto;. There's no need to do calculations in JavaScript.

汽车;简单,保证金:100 px。不需要用JavaScript进行计算。

Live Example

生活的例子

#6

Just do this:

只是这样做:

.body {
    position: relative;
}
.popup {
    position: absolute;
    max-width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

no matters the screen or popup size. This will center the <div class="popup"></div>.

屏幕大小和弹出框大小没有关系。这将位于

中心。

#7

You need to use these styles to make div center:

您需要使用这些样式来制作div center:

width:500px; 
left:0;
right:0;
margin:0 auto;

#1