Javascript 无法使用多模式'；它在同一页上

我需要在同一页上有多个模态。现在我只有两个。一个是动态加载内容，另一个是在删除文件时显示加载gif。加载gif模式可以正常工作，因为它可以自行打开和关闭。但是动态加载其内容的主模式失去了关闭的能力。当我将鼠标悬停在“关闭”按钮或链接上时，它不会变为指针，就像它无法识别按钮在那里一样

如果删除加载gif模式，则动态模式可以正常工作。我试过做不同的情态动词，但它们都有相同的问题

<div class="container-fluid">
    <div class="page-header">
        <h1 class="text-center">Link Details</h1>
</div>
<div id="linkDetailsWrapper">
<!-- Note - This content is loaded dynamically -->
    <div class="col-lg-6 uploadFiles" id="uploadFiles-right">
        <h3 class="text-center">Uploaded By Customer</h3>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>File Name</th>
                        <th class="hidden-xs">Date Added</th>
                        <th>Notes</th>
                        <th class="hidden-xs">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="/download/130">someFile.ext</a></td>
                        <td class="hidden-xs">2016-02-26 17:01:16</td>
                        <td><a href="#modal" data-toggle="modal" data-tooltip="tooltip" data-noteid="20" data-original-title="Click to view Note"><span class="glyphicon glyphicon-open-file"></span></a></td>
                        <td class="hidden-xs"><a title="Delete File" class="delete-file-link" data-fileid="130" data-tooltip="tooltip"><span class="glyphicon glyphicon-trash"></span></a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
<!--  End of dynamic content  -->   
    </div>
</div>
<div class="modal fade" id="modal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4>File Notes:</h4>
        </div>
        <div class="modal-body">
            <p>The Body</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="loadingModal">
<div class="modal-dialog">      
    <img src="/source/img/loader.gif" alt="loading..." class="loadingModal" />
</div>
</div>

<script src="/source/js/uploadLinks.js"></script>
<script>
    $('#linkDetailsWrapper').load('/_links/details/45');
</script> 

编辑：我找到了解决方案。我使用了在另一个论坛中找到的一些CSS，将模式垂直放置在页面中心。这导致了我的问题。我删除了CSS，现在可以开始了

CSS已删除：

body.modal-open .modal {
    display: flex !important;
    height: 100%;
}

---

不确定这是否是问题所在，但我会把你的img放在你的#加载模式中，至少放在一个.modal content-.modal主体内，就像你为你做的#modal一样。我也试过了，但没什么不同。我没有使用模态体和模态内容类，因为它们将gif放在白色模态内容框中。如果没有它，只会显示图像，而且看起来更好。不确定这是否是问题所在，但我会将你的img放在你的#loadingModal中，至少放在一个.modal content-.modal正文中，就像你为你做的那样#modal。我也试过了，但没什么不同。我没有使用模态体和模态内容类，因为它们将gif放在白色模态内容框中。没有它，只有图像显示，它看起来更好。

body.modal-open .modal {
    display: flex !important;
    height: 100%;
}