jquery - 图像在子模态选项卡中不可见 - MVC 5 .NET 中的模态内模态

Question

在我的 MVC 5 网站（引导程序 4.3.1）中，我想在现有模式中显示模式以显示缩略图。
我是引导程序和 MVC 的新手，所以我处理了一些事件来显示/隐藏子模式中的选项卡 - 第二个模式。

• 图像区域在 F12 检查元素期间显示，但实际图像不可见。
• 如果我尝试在浏览器中编辑 html 并在选项卡（图像的父级）的 div 内添加类似 <label/>或任何随机文本，则图像立即可见。

试图搜索 zindex 并监控 display: none/block 但看起来很奇怪，即使该区域正在使用，图像也不可见。

_Layout.cshtml 有主模式。
_DeviceTracker.cshtml局部视图有主模态表，第二模态表加上html和JS下面。

尝试应用各种类，如“modal-overlay”，但不工作。display:block 正在图像及其父级上设置，但由于某种原因仍然不可见。此外，浏览器控制台中没有错误。我还附上了它的外观和呈现 HTML 的屏幕截图。

谢谢你的帮助。

当用户单击主模式中的缩略图图标（来自 HTML 下面的表格）时，将调用 ShowThumnail 函数。

HTML ....

<div class="modal fade" id="PressSheetThumbnailModal" tabindex="-1" role="dialog" aria-labelledby="PressSheetThumbnailModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-overlay">
                <div class="modal-header">
                    <h4 class="modal-title" id="PressSheetThumbnailModalHeader">Modal title</h4>
                </div>
                <div class="modal-body table-responsive" style="padding:5px;">
                    <div>
                        <!-- Nav tabs -->
                        <ul class="nav nav-pills nav-fill" role="tablist" id="ThumbnailTabPanel">
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content" id="ThumbnailTabContent" style="display: block;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-target="#PressSheetThumbnailModal" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

脚本

    $(document).ready(function () {
        $('#DevicesActivity').DataTable({
            "filter": false,
            "paging": false
        });
    });

    function showThumbnail(wsid, jobid) {    
        $('#PressSheetThumbnailModalHeader').html(jobid + ' : ' + wsid);
        $('#ThumbnailTabPanel').empty();
        $('#ThumbnailTabContent').empty();    
        let prinectAPIResponse = FetchPressRoomManagerImages(wsid, jobid);
    }

    function FetchPressRoomManagerImages(wsid, jobid) {
            $.ajax({..
            },
            success: function (data) {
                ShowResponse(wsid, data);
                return data;
            },
            error: function (xhr, ajaxOptions, thrownError) { 
                alert(xhr.status);alert(xhr.responseText);
            },
        });
    }

    function ShowResponse(wsid, data) {    
        if(data!=null || data != undefined)
        {
            $.each($.parseJSON(data).previews, function (key, value) {
                // Show tabs with navigation feature
                $('#ThumbnailTabPanel').append(
                    $('<li>').addClass('nav-item')
                        .append(
                            $('<a>').addClass('nav-link')
                                .attr('id', wsid + value.previewType + '-tab')
                                .attr('data-toggle', 'pill')
                                .attr('href', '#' + wsid + value.previewType)
                                .attr('role', 'tab')
                                .attr('aria-controls', wsid + value.previewType)
                                .attr('aria-selected', 'false')
                                .text(value.previewType)));

                // Set the contents/body of each tab
                $('#ThumbnailTabContent').append(
                    $('<div>').attr('role', 'tabpanel')
                        //.attr('style','display: block;')
                        .attr('class', 'tab-pane')
                        .attr('id', + wsid + value.previewType)
                        .attr('aria-labelledby', wsid + value.previewType + '-tab')
                        //.attr('aria-hidden','true')
                        .append(
                            //$('<span>')
                            //.attr('style', 'display: block;')
                            //.attr('id', 'span-' + value.previewType)
                            //    .append(
                                    $('<image>')
                                .attr('src', 'data:' + value.mimeType + ';base64,' + value.data)
                                .attr('style', 'display: block;height: 300px;width: 350px;'))
                //)
                );
            });

            $('#ThumbnailTabPanel a').on('click', function (e) {
                e.preventDefault();    
                $(this).tab('show');    // Highlight selected tab link/button
                let selectedTabId = $(this).attr('id').split('-')[0];    
                $('#' + selectedTabId).show(); // Show selected tab content
                $('#' + selectedTabId).find('image').show();                    
                $(this).parent().siblings().each(function () {   // Hide unselected tabs content  
                    let otherTabId = $(this).children(0).attr('id').split('-')[0];
                    $('#' + otherTabId).find('image').hide();
                    $('#' + otherTabId).hide();
                });
            });

            $('#PressSheetThumbnailModal').modal('toggle'); // Show modal with Thumbnails
        }
    }

</script>

_Layout 页面中的主模式

DeviceTracker 页面中的子模式 - 图像不可见并呈现 HTML

标签： jqueryasp.net-mvcasp.net-mvc-5modal-dialogbootstrap-modal