Question

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

<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％

由于

Answer 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>

Answer 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的实际容器）。

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

2 个答案: