Изображения не видны на дочерних модальных вкладках - модальные внутри модальных в MVC 5 .NET - PullRequest
Новая
       35

Изображения не видны на дочерних модальных вкладках - модальные внутри модальных в MVC 5 .NET

0 голосов
/ 24 октября 2019

На моем веб-сайте MVC 5 (начальная загрузка 4.3.1) я хочу отобразить модальное изображение внутри существующего модального режима, чтобы отобразить уменьшенные изображения.
Я новичок в начальной загрузке и MVC, поэтому я обработал несколько событийпоказать / скрыть вкладки в дочернем модале - второй модал.

  • Во время проверки элемента F12 отображается область изображения, но фактическое изображение не отображается.
  • Если я попытаюсь отредактировать HTML-код в браузере и добавить что-то вроде <label/> или любой произвольный текст в div вкладки (родительский элемент изображения), то изображение сразу же станет видимым.

Попытка поиска zindex и отслеживаемого отображения: нет / блок, но кажется странным, что изображение не видно, даже если область используется.

_Layout.cshtml имеет основной модальный режим.
_DeviceTracker.cshtml частичное представление имеет таблицу основного модального, второго модального плюс, ниже HTML и JS.

Пытался применять различные классы, такие как 'modal-overlay', но не работал,display: блок устанавливается на изображении и его родительском элементе, но по какой-то причине он все еще не виден. Также нет ошибки в консоли браузера. Я также приложил скриншоты того, как это выглядит и отрисовал HTML.

Спасибо за вашу помощь.

Функция ShowThumnail будет вызываться, когда пользователь щелкает значок пиктограммы в основном модальном режиме (из таблицы ниже HTML).

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

...