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

Posted 2023-05-09

【中文标题】最大化每个页面上的弹出窗口

【英文标题】：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%。如图所示：

【参考方案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 代码。

感谢您的建议。但我在这里试镜并没有任何改变。