css - 以微型尺寸显示 PDF 的语义 UI 模态

Question

我正在使用模式在单击超链接时显示 pdf。

我的模态 div 和超链接定义如下

<div id='pdf_modal' class="ui sixteen wide column fullscreen modal">
    <iframe src="http://127.0.0.1:8119/App/Inv.pdf"></iframe>
</div>
<a id='visualize'>Open PDF</a>

我有这个 Javascript 来加载模式。

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#visualize').click(function()
        {
            $('#pdf_modal').modal('show');
        });
    });
</script>

我还在 http://jsfiddle.net/4woemsjt/1/ 创建了一个 JSFiddle

出于某种原因，生成的模态窗口在一个很小的左 Angular 显示了 PDF 文档。图片位于 http://imgur.com/taFWPWs

我希望能够看到它几乎覆盖了模态框的整个区域。

我做错了什么？请帮忙。

Answer 1

你需要给 iframe 一些宽度和高度

演示:http://jsfiddle.net/mirohristov/4woemsjt/2/

您可以使用 vh 单位的视口(viewport)屏幕高度百分比:

#pdf_modal iframe{
    width:100%;
    height:80vh;
}