如何实现modal居中显示并定位在对应链接按钮下方的效果？

问题根源 #

1. 全局通配div的CSS规则污染了所有div元素，导致modal遮罩层被强制设置为50%宽度、fixed居中定位，出现背景只覆盖半页、位置偏移的问题
2. modal样式的left:10、top:10未加单位，且优先级低于全局div样式，无法生效
3. 关闭按钮默认设置为右浮动，不符合左侧放置的需求
4. 后两个按钮Achat、Finance未绑定modal触发类，且缺少对应的2个modal结构，点击无响应
5. 现有modal默认采用固定padding定位，无法实现跟随对应按钮下方弹出的效果

修改方案 #

1. HTML修改

• 给外层容器加专属类避免全局样式污染，后两个按钮添加触发类，补全剩余2个modal结构：

<!-- 外层容器修改 -->
<div class="page-container square rounded p-5 border border-secondary">

<!-- 按钮修改 -->
<ul class="list">
  <li><button class="myBtn_multi">Vente</button></li>
  <li><button class="myBtn_multi">Inventaire</button></li>
  <li><button class="myBtn_multi" id="myBtn2">Achat</button></li>
  <li><button class="myBtn_multi" id="myBtn3">Finance</button></li>
</ul>

<!-- 补全后2个modal -->
<div class="modal modal_multi">
  <div class="modal-content">
    <span class="close close_multi">×</span>
    <p>Some text in the Modal..3</p>
  </div>
</div>
<div class="modal modal_multi">
  <div class="modal-content">
    <span class="close close_multi">×</span>
    <p>Some text in the Modal..4</p>
  </div>
</div>

2. CSS修改

• 删除全局通配div样式，替换为外层容器专属样式，修正modal定位、关闭按钮位置：

/* 替换原来的全局div样式 */
.page-container{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}

ul {
  padding-top:10px;
  padding-bottom: 100px;
  margin: 0;
}

li {
    float: left;
    width:25%;
    text-align:center;
    list-style-type: none;
    border-right:2px solid;
}

button {
  background-color: none;
  border: none;
  color: blue;
  text-decoration: underline;
  background-color: white;
  font-family:helvetica;
  font-size:20px;
}

.list li:last-child {
    border-right:none;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

/* 修正后的modal样式 */
.modal {
    display: none;
    position: fixed !important;
    z-index: 1000;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding: 0 !important;
    transform: none !important;
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 200px;
    position: absolute;
}

/* 关闭按钮移到左侧 */
.close {
    color: #aaaaaa;
    float: left;
    font-size: 28px;
    font-weight: bold;
    margin-right: 10px;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

3. JS修改

• 新增按钮位置计算逻辑，修复全局点击关闭的错误逻辑：

var modalparent = document.getElementsByClassName("modal_multi");
var modal_btn_multi = document.getElementsByClassName("myBtn_multi");
var span_close_multi = document.getElementsByClassName("close_multi");

function setDataIndex() {
    for (i = 0; i < modal_btn_multi.length; i++) {
        modal_btn_multi[i].setAttribute('data-index', i);
        modalparent[i].setAttribute('data-index', i);
        span_close_multi[i].setAttribute('data-index', i);
    }
}

for (i = 0; i < modal_btn_multi.length; i++) {
    modal_btn_multi[i].onclick = function() {
        var ElementIndex = this.getAttribute('data-index');
        // 获取点击按钮的坐标
        const btnRect = this.getBoundingClientRect();
        const currentModal = modalparent[ElementIndex];
        const modalContent = currentModal.querySelector('.modal-content');
        // 计算modal位置，居中对齐按钮下方，间距10px
        modalContent.style.left = btnRect.left + (btnRect.width / 2) - (modalContent.offsetWidth / 2) + 'px';
        modalContent.style.top = btnRect.bottom + 10 + 'px';
        currentModal.style.display = "block";
    };

    span_close_multi[i].onclick = function() {
        var ElementIndex = this.getAttribute('data-index');
        modalparent[ElementIndex].style.display = "none";
    };

}

window.onload = function() {
    setDataIndex();
};

window.onclick = function(event) {
    if (event.target.classList.contains('modal_multi')) {
        event.target.style.display = "none";
    }
};

修改后即可实现modal全屏遮罩、跟随点击按钮下方居中弹出、关闭按钮位于左侧的效果，4个按钮均可正常触发对应modal。

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