js弹出div窗口居中

在JavaScript中，要使弹出的div窗口居中显示，可以通过计算屏幕尺寸和div的尺寸来确定其位置。以下是一个简单的示例，展示了如何实现这一功能：

基础概念

DOM操作：JavaScript可以操作HTML文档对象模型（DOM），从而改变页面内容和结构。
样式属性：通过修改元素的CSS样式属性，可以控制其显示位置和外观。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Div Example</title>
<style>
    #popup {
        display: none; /* 默认隐藏 */
        position: absolute;
        width: 300px;
        height: 200px;
        background-color: white;
        border: 1px solid black;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
</style>
</head>
<body>

<button onclick="showPopup()">Show Popup</button>
<div id="popup">This is a centered popup!</div>

<script>
function showPopup() {
    var popup = document.getElementById('popup');
    popup.style.display = 'block'; // 显示弹出层

    // 获取屏幕宽度和高度
    var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    // 获取弹出层的宽度和高度
    var popupWidth = popup.offsetWidth;
    var popupHeight = popup.offsetHeight;

    // 计算弹出层的居中位置
    var left = (screenWidth - popupWidth) / 2;
    var top = (screenHeight - popupHeight) / 2;

    // 设置弹出层的位置
    popup.style.left = left + 'px';
    popup.style.top = top + 'px';
}
</script>

</body>
</html>