Data Table动态布局：实现后Modal弹窗位置异常问题求助

在完成Data Table组件实现后，Modal弹窗显示在页面底部，该问题是由于Data Table的高度会根据承载的数据条数动态变化导致的。我尝试编写如下函数修复该问题，但代码并未生效：

"initComplete": function(){
    $('#full-width').addClass('modal-overflow')
    $('#full-width').css('margin','10%')
}

这段代码不生效是两个硬伤：

• 触发时机错误：initComplete只会在DataTable第一次初始化完成时执行一次，后续表格因为数据条数变化撑高高度的时候，这个回调不会重复触发，动态添加的样式根本跟不上高度变化。
• 样式逻辑错误：绝大多数Modal组件默认靠position: fixed+top属性控制垂直位置，单纯添加margin:10%根本覆盖不了组件自带的定位规则，自然没法把弹窗拉到视口正常位置。
• 额外排查点：确认Modal的DOM节点是直接放在<body>标签下的，不要嵌在其他设置了position: relative/absolute的容器里，否则fixed定位会相对父容器偏移，直接跑到页面内容底部。

按以下步骤调整即可彻底解决问题，不需要依赖JS动态改边距：

1. 优先写全局CSS规则，从根源上让弹窗不受内部表格高度影响，不要在JS回调里动态加类、改行内样式：

/* 固定弹窗相对视口定位，不受内部内容高度影响 */
#full-width.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding-top: 10vh;
    overflow-y: auto;
    z-index: 1050;
}
/* 控制弹窗内容区最大高度，内部表格超高时直接在内容区滚动 */
.modal-overflow .modal-content {
    max-height: 80vh;
    overflow: auto;
}

2. 删除原来initComplete回调里添加类、修改margin的逻辑，上述CSS在页面加载时就引入即可，不需要等表格初始化完成再生效。
3. 如果弹窗是点击触发显示的，在弹窗的显示完成回调里触发表格列宽重算，避免动态高度下表格列错位：

// 以Bootstrap Modal为例，使用其他UI框架时替换为对应弹窗的shown回调即可
$('#full-width').on('shown.bs.modal', function () {
    $('#yourDataTable').DataTable().columns.adjust();
})

不要用JS动态计算margin去适配弹窗位置，只要给弹窗本身加视口级固定定位、给内部内容区设置最大高度和滚动规则，不管Data Table加载多少条数据，弹窗都会固定从视口顶部10vh的位置开始展示，内容超高时弹窗整体滚动，不会跑到页面底部。

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