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

2022-01-20 00:00:00 popup javascript css

我有以下代码在禁用背景的同时打开一个新的弹出窗口，问题是我必须定位它，使其距离顶部 100px(已经通过 CSS #dialog 得到)并且也在中心屏幕，不管用户的分辨率是多少?

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?

<!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>

推荐答案

基于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 */

所以应该指定position.top 和 left 应该是 50%.margin-left 和 margin-top 应该分别是盒子宽度和高度的负值的一半.

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.

请注意，如果您希望您的弹出窗口即使在页面滚动时也显示在中心，您将不得不使用 position:fixed 来代替它在 IE6 中不起作用的缺点.

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.

相关文章