我怎么把javascript css弹出div中心,不管屏幕分辨率是多少？

Question

我怎么把javascript css弹出div中心,不管屏幕分辨率是多少？

我有以下代码,在禁用背景时打开一个新的弹出窗口,问题是我必须将它定位为从顶部100px(已经通过CSS #dialog获得)以及屏幕中心,无论用户的分辨率是多少？

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sar*_*raz 41

基于CSS的中心解决方案:

您需要使用这些样式使其显示为死点:

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

Run Code Online (Sandbox Code Playgroud)

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

请注意,如果您希望弹出窗口显示在中心,即使页面滚动,您也必须使用position:fixed回退,它在IE6中不起作用.

Answer 2

Cel*_*res 9

只需这样做：

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

Run Code Online (Sandbox Code Playgroud)

无论屏幕或弹出窗口大小。这将使<div class="popup"></div>.

归档时间：	13 年，5 月前
查看次数：	53988 次
最近记录：	9 年，9 月前