javascript - 如何在不丢失可调整大小属性的情况下显示具有自定义高度和宽度的模态？

Question

我想打开一个弹出窗口，它在 iframe 中加载另一个网页并以模式( Bootstrap )显示。

这已经实现了，但是每当我想自定义高度和宽度时，就会出现问题。

 function popupIframe(popupTitle,popupSrc)
    {
        var html="";
        var htmlIframe="";
        htmlIframe += '<div style="padding:5px;">';
        htmlIframe += '<div>';
        htmlIframe += '<h4 class="pull-left title" style="padding:5px;">'+popupTitle+'</h4>';
        htmlIframe += '<button type="button"   class="close" id="clBtnPopup"><i class="fa fa-times"></i></button>';
        htmlIframe += '</div>';
        htmlIframe += '<div style="clear:both;"><hr class="divider"></div>';
        htmlIframe += '<div class="embed-responsive embed-responsive-16by9"> ';
        htmlIframe += '<div id="loading" style="top:45%;left:45%;position:absolute;"><img src="'+theme_root+'/images/app/loading-flat.gif" class="img-responsive" title="loading.." alt="loading.."/><p class="text-center">loading..</p></div>';
        htmlIframe += '<iframe class="embed-responsive-item" src="'+popupSrc+'" id="popIfr" style="display:none;"></iframe>';
        htmlIframe += '</div>';
        htmlIframe += '<div>&nbsp;</div>';
        htmlIframe += '</div>';

        html += '<div class="modal fade" id="popupModal" role="dialog" >';
        html += '<div class="modal-dialog modal-lg">';
        html += ' <div class="modal-content" style="padding:0px;border:0px;">';
        html += '<div class="modal-body" style="padding:0px;border:0px;">'+htmlIframe+'</div>';
        html += '</div>';
        html += '</div>';
        html += '</div>';

        $('body').append(html);

        //---------------
        $("#popupModal").modal({backdrop: "static"});
        $("#clBtnPopup").bind("click", function(){
        $("#popupModal").modal("hide");

        $('#popupModal').on('hidden.bs.modal', function () {
                // do something…
                $("#popupModal").remove();
                });
            });
        $('#popIfr').load(function() {
             $('#loading').hide();
             $(this).show();
            });

    }

我需要将 css 添加到模态(通过 jQuery)，这样它就会在小屏幕上显示完整的高度和宽度，并在 md/xs 或大屏幕上的所有边上留出 30 像素的边距。

也欢迎任何以其他方式做这些事情的建议。谢谢

Answer 1

我无法使用您提供的相关内容重现模态，但使用 jQuery，这是非常可以实现的

$(document).ready(function () {
    setInterval(dimension, 500);

    function dimension() {
        $('.modal-content').css('height', $(window).height() * 0.9);
        $('.modal-content').css('width', $(window).width() * 0.9);
    }
});

CSS

.modal-dialog {
    margin: 30px 30px auto !important;
    width: inherit !important;
}

Fiddle-1

或者

$(document).ready(function () {
    setInterval(dimension, 500);

    function dimension() {
        $('.modal-content').css('height', $(window).height() * 1);
        $('.modal-content').css('width', $(window).width() * 1);
    }
});

CSS

.modal-dialog {
    margin: 0px 0px auto !important;
    width: inherit !important;
}

Fiddle-2

或者

动态添加内联样式使用show.bs.modal event

$('#myModal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              'max-height':'100%'
       });
});

CSS(媒体查询示例)

.modal-dialog {
    margin: 10px 10px auto !important;
    width: inherit !important;
}
@media (max-width: 480px) {
    .modal-dialog {
        margin: 0px 0px auto !important;
        width: inherit !important;
    }
}

Fiddle-3

旁注:您可能需要在 jQuery 或 CSS 或两者中进行一些调整才能获得所需的结果。您可以使用媒体查询根据屏幕高度调整边距。