Javascript对话框自动高度无法正常工作答案

【问题标题】：Javascript dialog auto heigth not work correctlyJavascript对话框自动高度无法正常工作
【发布时间】：2017-05-04 10:57:44
【问题描述】：

我在 cshtml 中编写了这段代码来为我的 pdf 查看器模式创建一个容器：

<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
        <iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
                style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>

而我的 js 是：

function PopupPDF() {
    $('#form_modal_PDF').dialog({
        open: function () {
            $(this).closest(".ui-dialog")
            .find(".ui-button-text")
            .removeClass("ui-button-text");
        }
        , autoOpen: false
        , modal: true
        , draggable: false
        , resizable: false
        , show: 'slide'
        , hide: 'drop'
        , width: '80%'
        , height: 'auto'
        , beforeClose: function () {
            $('#form_load_PDF').attr('src', 'about:blank');
        }
    });
    $('#form_modal_PDF').dialog('open');

    $('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}

但我的对话框 pdf 查看器的高度仅占我屏幕的 10%

谢谢

【问题讨论】：

你可能想用javascript计算你需要的高度，或者设置一个默认的高度百分比（但我认为百分比对高度不起作用，除非他们修复了某个错误......或者也许这是故意的）。
不适用于百分比，如何在 javascript 中计算高度？
你用的是什么版本的jquery-ui？我正在尝试使用 1.12.1 版本并且“height: 'auto'” 有效。

标签： javascript html pdf dialog pdfviewer

【解决方案1】：

您需要像这样更改 iframe 代码

<iframe id="form_load_PDF" class="IframeDialog" frameborder="1" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>

【讨论】：

【解决方案2】：

以下是使用 javascript 计算高度的方法：

$(document).ready(function() {
  PopupPDF();
});

function PopupPDF() {
    $('#form_modal_PDF').dialog({
        open: function () {
            $(this).closest(".ui-dialog")
            .find(".ui-button-text")
            .removeClass("ui-button-text");
        }
        , autoOpen: false
        , modal: true
        , draggable: false
        , resizable: false
        , show: 'slide'
        , hide: 'drop'
        , width: '80%'
        , height: $('body').height() * 0.6
        , beforeClose: function () {
            $('#form_load_PDF').attr('src', 'about:blank');
        }
    });
    $('#form_modal_PDF').dialog('open');

    $('#form_load_PDF').attr('src', '?test=' + encodeURIComponent("test.pdf"));
}

html, body {
  height: 100%;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<div id="form_modal_PDF" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" hidden="hidden" style="width: 100%; height: 100%;">
        <iframe id="form_load_PDF" class="IframeDialog" frameborder="1"
                style="width: 100%; height: 100%;" src="about:blank"></iframe>
</div>

使用$('body').height() * 0.6 完成。只需将其更改为您想要的百分比（并将“body”替换为“form_modal_PDF”div 的实际容器）。

【讨论】：