1

我在 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%

谢谢

4

2 回答 2

0

您需要像这样更改 iframe 代码

<iframe id="form_load_PDF" class="IframeDialog" frameborder="1" style="overflow: hidden; height: 100%; width: 100%; position: absolute;" height="100%" width="100%"></iframe>
于 2017-05-04T11:13:13.623 回答
0

以下是使用 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 的实际容器）。

于 2017-05-04T11:26:34.477 回答