jquery 窗口居中

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。窗口居中是指将一个弹出窗口或对话框居中显示在浏览器窗口中。

类型

窗口居中的实现方式主要有以下几种：

绝对定位：通过设置元素的 position 属性为 absolute，并计算其 top 和 left 值，使其居中显示。
CSS Flexbox：利用 CSS Flexbox 布局，通过设置 justify-content 和 align-items 属性实现居中。
CSS Grid：利用 CSS Grid 布局，通过设置 place-items 属性实现居中。

应用场景

窗口居中常用于弹出对话框、模态框、提示框等场景，提升用户体验。

示例代码

以下是使用 jQuery 和 CSS 实现窗口居中的示例代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 窗口居中示例</title>
    <style>
        #dialog {
            display: none;
            position: absolute;
            width: 300px;
            height: 200px;
            background-color: white;
            border: 1px solid black;
            padding: 20px;
        }
    </style>
</head>
<body>
    <button id="openDialog">打开对话框</button>
    <div id="dialog">
        这是一个居中的对话框
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#openDialog').click(function() {
                var dialog = $('#dialog');
                dialog.css({
                    display: 'block',
                    top: ($(window).height() - dialog.height()) / 2,
                    left: ($(window).width() - dialog.width()) / 2
                });
            });

            $(window).resize(function() {
                var dialog = $('#dialog');
                if (dialog.css('display') === 'block') {
                    dialog.css({
                        top: ($(window).height() - dialog.height()) / 2,
                        left: ($(window).width() - dialog.width()) / 2
                    });
                }
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：窗口居中计算不准确

原因：窗口大小变化时，居中计算没有及时更新。

解决方法：监听窗口的 resize 事件，重新计算并更新居中位置。

$(window).resize(function() {
    var dialog = $('#dialog');
    if (dialog.css('display') === 'block') {
        dialog.css({
            top: ($(window).height() - dialog.height()) / 2,
            left: ($(window).width() - dialog.width()) / 2
        });
    }
});