twitter-bootstrap 如何在 twitter bootstrap 中以模态呈现`pdf 文件`?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18335516/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:01:59  来源:igfitidea点击:

How to render a `pdf file` in a modal in twitter bootstrap?

twitter-bootstrap

提问by schnill

I am creating a personal web page using twitter-bootstrap 3. I want to render a .pdf fileinside a modal. How can i do that? Thanks in advance.

我正在使用 twitter-bootstrap 3 创建一个个人网页。我想.pdf file在模态内部渲染一个。我怎样才能做到这一点?提前致谢。

回答by Tate Reynolds

It would be relatively similar to using the JQuery UI dialog. (http://jqueryui.com/download/) You include these scripts inside tag

它与使用 JQuery UI 对话框比较相似。( http://jqueryui.com/download/) 你在标签中包含这些脚本

<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>

JQuery code

查询代码

 <script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $('#trigger').click(function(){
      $("#dialog").dialog();
    }); 
  });                  
</script>

HTML code within (using an iFrame to load the PDF)

内的 HTML 代码(使用 iFrame 加载 PDF)

<a href="#" id="trigger">this link</a>
<div id="dialog" style="display:none">
    <div>
    <iframe src="yourpdffile.pdf"></iframe>
    </div>
</div>