我在点击超链接时使用模态显示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
我希望能够看到它几乎覆盖了模态的整个区域。
我做错了什么?请帮忙。
答案 0 :(得分:3)
你需要给iframe一些宽度和高度
演示:http://jsfiddle.net/mirohristov/4woemsjt/2/
您可以使用视口屏幕高度与vh单位的百分比:
#pdf_modal iframe{
width:100%;
height:80vh;
}