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

Question

我正在创建一个功能来最大化我的弹出窗口，在本例中是一个 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%。如图所示：

Answer 1

你可以试试用这个来设置尺寸

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

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

更多关于 CSS 个单位 here。

Answer 2

    /* 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);
}

Answer 3

我可以用这个 CSS 属性.

解决我的问题

最小高度：100%；

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

Maximize popup on every page

javascript

css

iframe

jquery

popup