模态与内容重叠并使内容在引导程序中不可点击？答案

【问题标题】：Modal is overlapping the content and making the content unclickable in bootstrap?模态与内容重叠并使内容在引导程序中不可点击？
【发布时间】：2020-06-23 11:18:49
【问题描述】：

我已经制作了一个显示在页脚中的模态，但是当模态出现时它会与整个 div 重叠并使侧边栏无法点击。

代码如下：

<footer>     
<div class="modal custom show" id="trackModal"  role="dialog" aria-labelledby="trackModalLabel" aria-hidden="false">
                 <div class="modal-dialog" id="popup">
                     <div class="modal-content">
                          <img id="popclose" src="~/Content/MediaCenter/assets/images/cookies.jpg">
                     </div>
                  </div>
        </div>
<footer>

这是css

div#popup {
    left: 18%;
}
div#trackModal {
    z-index: 1049;
}

.modal.custom .modal-dialog {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    content: "";
    width: 130%;
    display: none;
}

我试过visibility:hidden; overflow-x:auto 和 overflow-y:auto。但结果还是一样。

请问有人可以帮忙吗？

【问题讨论】：

请更新您的代码，以便我们重现该问题。
getbootstrap.com/docs/4.4/components/modal/#how-it-works
<div class="modal custom show" id="trackModal" role="dialog" aria-labelledby="trackModalLabel" aria-hidden="false" tabindex="-1"> 尝试添加 tabindex="-1"，如图所示。

标签： javascript jquery html css css-selectors

【解决方案1】：

像这样对模型使用 Z-index 属性：

   .modal.custom .modal-dialog {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
        content: "";
        width: 130%;
        display: none;
        z-index: -1; 
    }

所以现在，侧边栏将出现在您的模型前面。试试吧。

【讨论】：