Bootstrap modal - 添加嵌入PDF的对象标记 [英] Bootstrap modal - Add a object tag embedding a PDF

查看:350
本文介绍了Bootstrap modal - 添加嵌入PDF的对象标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正试图显示一个引导模式,其中我想包括一个PDF文件与对象html标签。问题是没有任何显示。

I'm currently trying to display a bootstrap modal in which I want to include a PDF file with the "object" html tag. Problem is that nothing seems to display.

我创建了一个 jsFiddle < a>( http://jsfiddle.net/mV6jJ/3/ )。

所以你会发现一个基本的模式(完全相同的代码从一个基本的模式显示后,一个基本的模式显示后,一个按钮)在模态体你可以找到:

So you will find a basic modal (exactly same code from bootstrap for a basic modal showing after a click on a button) and in the modal-body you will find :

<object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500">this is not working as expected</object>

所以当我单独添加这个代码(所以不是在bootstrap模态)它在浏览器的默认pdf查看器中显示pdf。但是当我尝试在bootstrap模式中实现pdf时,似乎没有出现。

So when I add this code alone (so not inside a bootstrap modal) it's working as expected. It display the pdf in the browser's default pdf viewer. But when I try to implement the pdf inside of the bootstrap modal, nothing seems to appear.

如果你有任何想法,它会真的帮助我,

If you have any idea it will really helps me, many hours searching and I've only seen solutions with tag (which I don't want to use).

感谢您和最好的问候

推荐答案

我发现bootstrap包含一个影响在模态窗口中pdf查看的css属性。

I have found that bootstrap include a css property that affect to pdf viewing in a modal window.

.modal.in .modal-dialog {
  transform: translate(0px, 0px);
}

到:

.modal.in .modal-dialog {
  transform: none;
}

如果此属性更改,一切正常。

If this property is changed everything works properly.

您可以在操作中看到:

http://jsfiddle.net/mV6jJ/20/

这篇关于Bootstrap modal - 添加嵌入PDF的对象标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆