语义UI模式以微缩大小显示PDF

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

由于某种原因，生成的模态窗口在左上角显示PDF文档。图片位于http://imgur.com/taFWPWs

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

我做错了什么？请帮忙。

Answer 1

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

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

您可以使用视口屏幕高度与vh单位的百分比：

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