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添加到modal（通过jQuery），这样它将在小屏幕上显示完整的高度和宽度，并且在md / xs或大屏幕上全部占用30 px边距。

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

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

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

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

1 个答案: