如何让模态框（Modal）显示在触发点击的按钮链接正下方？

问题分析 #

当前代码的核心问题有两个：

1. 外层.modal设置了align-items: center和justify-content: center，强制内部内容居中，覆盖了通过JS设置的定位规则。
2. JS代码错误地修改了全屏遮罩层（.modal）的位置，而非实际的内容窗口（.modal-window），导致定位失效。

解决方案 #

1. 修正CSS样式 #

调整模态框外层和内容窗口的定位规则，去掉强制居中的样式：

.modal{
    position: fixed; /* 使用fixed确保遮罩始终覆盖视口，不受滚动影响 */
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5); /* 可选：添加半透明背景增强遮罩效果 */
}

.modal-window{
    position: absolute;
    border-top: 2px solid #cecece;
    box-shadow: 0 0 0 1rem rgba(206, 206, 206, .5);
    background-color: #fff;
    padding: 150px;
    overflow: auto;
    max-height: calc(100vh - 4rem);
    min-width: 300px; /* 可选：设置最小宽度避免窗口过窄 */
}

2. 修正JavaScript逻辑 #

调整JS代码，定位目标改为内容窗口，并处理页面滚动带来的偏移问题：

$(document).ready(function() {
    $('#ModalBtn').on('click', function(e) {
        e.preventDefault(); // 阻止按钮链接的默认跳转行为
        var button = $(this);
        var modal = $('#modalClicked');
        var modalWindow = modal.find('.modal-window');

        // 获取按钮的位置和尺寸
        const buttonOffset = button.offset();
        const buttonHeight = button.outerHeight();
        const scrollTop = $(window).scrollTop();
        const scrollLeft = $(window).scrollLeft();

        // 设置内容窗口位置：顶部与按钮底部对齐，左侧与按钮左侧对齐
        modalWindow.css({
            top: buttonOffset.top + buttonHeight - scrollTop,
            left: buttonOffset.left - scrollLeft
        });

        modal.show();
    });

    // 可选：点击遮罩层关闭模态框
    $('#modalClicked').on('click', function(e) {
        if ($(e.target).is(this)) {
            $(this).hide();
        }
    });
});

关键修改说明 #

• 将.modal的position改为fixed，确保遮罩层始终覆盖整个视口，不会随页面滚动移动。
• 移除.modal的居中样式，让内容窗口可以自由定位。
• 目标定位元素改为.modal-window，而非全屏的.modal容器。
• 加入滚动偏移计算，确保页面滚动时，模态框依然能准确定位在按钮下方。

内容的提问来源于stack exchange，提问作者phez