最大化每个页面上的弹出窗口答案

【问题标题】：Maximize popup on every page最大化每个页面上的弹出窗口
【发布时间】：2020-09-25 06:14:33
【问题描述】：

我正在创建一个功能来最大化我的弹出窗口，在本例中是 iframe。我正在使用以下 JQuery 代码来实现此功能：

$(document).ready(function(){

  $('#"+btnMaximiza.Id+"').click(function(){

    $('#"+btnMaximiza.Id+"').hide();
    $('#"+btnMinimiza.Id+"').show();

    $('.os-internal-Popup', window.parent.document).attr('style', 'top: 0px!important');
    $('.os-internal-Popup', window.parent.document).css('left','0px');
    $('.os-internal-Popup', window.parent.document).css('z-index','5000');
    $('.os-internal-Popup', window.parent.document).width('100%');
    $('.os-internal-Popup', window.parent.document).height('100%');

  });

});

我的问题是它没有使高度达到页面的 100%。如图所示：

【问题讨论】：

标签： javascript jquery css iframe popup

【解决方案1】：

    /* Popup Iframe **************************/
.os-internal-Popup.os-internal-ui-dialog iframe {
    border-radius: 4px;
}

/* Popups **************************/
.os-internal-Popup .os-internal-ui-dialog,
.os-internal-Popup.os-internal-ui-dialog {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) !important;
    max-height: 95%; /* iframe document height fix */
    min-width: 300px;
    overflow: visible !important;
}

body.desktop .os-internal-Popup .os-internal-ui-dialog,
body.desktop .os-internal-Popup.os-internal-ui-dialog {
    min-width: 500px;
}

div.os-internal-Popup .os-internal-ui-dialog,
div.os-internal-Popup.os-internal-ui-dialog {
    background-color: #fff;
    border: none;
    border-radius: 4px;
    position: fixed;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
    max-height: 100%; /* iframe document height fix */
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-title,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-title {
    color: #fff;
    font-weight: 600;
    left: 20px;
    margin: 0;
    top: 10px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close {
    background: url(/OutSystemsUIWeb/img/PopupCloseWhite.png?14311) no-repeat;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: all .3s ease;
    width: 20px;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover,
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close:hover {
    opacity: .7;
    transform: rotate(90deg);
}

【讨论】：

【解决方案2】：

我能够用这个 CSS 属性解决我的问题。

最小高度：100%；

【讨论】：

【解决方案3】：

你可以尝试用这个来设置大小

$('.os-internal-Popup', window.parent.document).height('100vh');
$('.os-internal-Popup', window.parent.document).width('100vw');

vh：视图高度和vw：视图宽度。

更多关于 CSS 单元 here.

【讨论】：

但是，如果它不起作用，请分享您的 CSS 代码。
感谢您的建议。但我在这里试镜并没有任何改变。