Question

实际上我想在pdf上显示模态窗口，并且它在IE，Chrome＆amp; Mozilla Firefox，但它不适用于Safari 5.1.7

那么请问任何1请帮助我找到解决方案吗？我在Windows操作系统上遇到这个问题，即XP，Windows 8＆amp; Windows 7。

这是我的JS小提琴链接：http://jsfiddle.net/xdrc1nou/

以下是我的代码

HTML

<div id="divHover">try me</div>
<div id="divHoverChild">hello</div>
<iframe id="ifBG" src="about:blank"></iframe>
<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf"></iframe>

Javascript

 $().ready(function () {
      var $child = $("#divHoverChild");
      var $ifBG = $("#ifBG");

        $("#divHover").mouseover(function () {
           $child.slideDown();
           $ifBG.slideDown();
        })
       $child.mouseout(function () {
           $child.slideUp();
           $ifBG.slideUp();
       });
   });

Answer 1

很难找到OSX Lion运行Safari 5.1的人来回答你的问题（这几乎是3个版本，优胜美地即将到来），全球使用率低于0.5％的浏览器。

考虑到这一点，这个答案会给你一些指示，它还没有经过我的测试。

一般情况下，当嵌入式iframe与页面上的叠加效果不佳时，常见的解决方案是将这些样式应用于有问题的iframe：

<iframe id="ifPDF" src="http://bitcoin.org/bitcoin.pdf" style="position: relative; z-index: -1;></iframe>

看看是否这样做。

不太优雅的解决方案是在触发叠加层时隐藏有问题的iframe，从而避免重叠（因为重叠元素消失了）。

仅仅为了Safari 7中的记录，它就能完美运行，就像你提到的其他现代浏览器一样正常运行。

Answer 2

使用object和ember怎么样：

<object src="http://yoursite.com/the.pdf" width="700px" height="700px" style="position: relative; z-index: -1;">
    <embed src="http://yoursite.com/the.pdf" style="position: relative; z-index: -1;">
    </embed>
</object>

我也无法测试。我正在运行Linux。

PDF在Safari 5.1.7中隐藏Jquery模态窗口

2 个答案: