模式重叠了内容并使内容在引导程序中不可点击？

Question

我制作了一个以页脚显示的模态，但是当模态出现时，它与整个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。但是结果保持不变。

请任何人能帮助吗？

Answer 1

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