Question

我需要在同一页面上有多个模态。现在我只有两个。一个动态加载内容，另一个显示正在删除文件时的加载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>

uploadLinks.js的内容：

$('body').tooltip({
    selector: '[data-tooltip="tooltip"]', 
    trigger: 'hover'
});

$('#modal').on('show.bs.modal', function(e)
{
    var link = $(e.relatedTarget);
    var noteID = link.data('noteid');

    $(this).find('.modal-body').load('/_links/loadNote/'+noteID);
});

$(document).on('click', '.delete-file-link', function(e)
{
    var el = $(this);
    if(confirm('Are You Sure?\nThis Cannot Be Undone.'))
    {
        $('#loadingModal').modal('show');
        $.get('/_links/deleteNote/'+$(this).data('fileid'), function(data)
        {
            if(data == 'success')
            {
                el.closest('tr').remove();
                $('#loadingModal').modal('hide');
            }
            else
            {
                alert('There was a problem deleting the file.\nAn error log has been generated.');
                $('#loadingModal').modal('hide');
            }     
        });
    }
});

编辑：我找到了解决方案。我正在使用我在另一个论坛中找到的一些CSS来垂直居中页面上的模态。这导致了我的问题。我删除了CSS，现在我很高兴。

CSS删除：

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

无法在同一页面上使用多个模态

0 个答案: