Javascript 模态是重叠的内容，使内容不可在引导？

我制作了一个显示在页脚的模式，但当模式出现时，它与整个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>

我尝试了

可见性：隐藏
overflow-x:auto
和
overflow-y:auto
。但结果仍然是一样的

如果有人能提供帮助，请？
对模型使用Z-index属性，如下所示：

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

现在，侧栏将位于模型的前面。试试看
 请更新您的代码，以便我们可以重现该问题。
尝试添加tabindex=“-1”，如图所示。
   .modal.custom .modal-dialog {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
        content: "";
        width: 130%;
        display: none;
        z-index: -1; 
    }