<div> слой поверх PDF - PullRequest
Новая
       33

<div> слой поверх PDF

21 голосов
/ 27 февраля 2009

Итак, проблема, с которой я сталкиваюсь, такова: У меня есть слой, который он будет помещен поверх PDF на странице. PDF использует либо для встраивания, либо iframe для его включения. Тем не менее, стиль CSS не применяется к PDF (потому что это плагин?). Поэтому даже я поставил z-index: 1000 для того, что слой все еще идет за PDF. есть идеи как это исправить?

вот код: 

<style type="text/css">
<!--#apDiv1 {
    position:absolute;
    left:543px;
    top:16px;
    width:206px;
    height:223px;
    z-index:1000;
    background-color:#999999;
}
</style>
<body>
  <!-- embed the pdf  -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
  alt : <a href="test.pdf">test.pdf</a>
</object>

  <!-- layer -->

<div id="apDiv1" >Whatever text or object here.</div>
</body>

Ответы [ 6 ]

25 голосов
/ 03 апреля 2009

Прочитав некоторые форумы ... (здесь некоторые комментарии)

PDF загружается плагином Acrobat Reader. Он как бы делает свое дело и не имеет никакого отношения к какому-либо HTML или даже браузеру в этом отношении (кроме загрузки браузером). У людей такая же проблема с плагином Flash, и для этого нет решения. Так что я думаю, что для этого тоже нет решения. Лучше всего изменить дизайн меню, чтобы оно не занимало пространство, занимаемое PDF.

Если это плагин, то вы не можете надежно разместить другие элементы поверх него. Браузеры обычно отказываются от большей части своих возможностей «наслоения» элементов при подключении плагинов.

Нет прямой поддержки наложения «z-indexing» на div в Api или Dom. Плагин загружает исполняемый файл, который, в очень простых терминах, пробивает дыру в окне браузера. Использование метода «iframe shim» является стандартным решением, хотя прозрачность может быть сложной.

МОЕ РЕШЕНИЕ: Два iframe, каждый внутри div с различным z-index, когда вы нажимаете желтый div, отображается пустой iframe (перед iframe pdf), так что вы можете видеть зеленый div внутри документа pdf. 

<html>
<head>
     <script type="text/javascript">
        function showHideElement(element){
            var elem = document.getElementById(element);

            if (elem.style.display=="none"){
                elem.style.display="block"
            }
            else{
                elem.style.display="none"
            }
        }
    </script>
</head>
<body>
    <div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
    <div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>

    <div style="position:absolute;z-index:20;margin-left:200px;">
    <iframe visible="true"  id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

    <div style="position:absolute;z-index:10;margin-left:100px;">
    <iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >

     </iframe>
     </div>

</body>
</html>

Фернандо Родригес frodale@gmail.com

5 голосов
/ 27 февраля 2009

Существует плагин jquery, bgiframe , который делает реализацию этого исправления довольно простой.

1 голос
/ 21 апреля 2011

Я только что нашел решение для этого. Используйте Google PDF Viewer в iframe, чтобы отобразить ваш PDF на странице, тогда он работает как любой другой div.

пример:

1 голос
/ 27 февраля 2009

Как правило, вы можете обойти эти проблемы z-index, поместив вставку iframe непосредственно под div. То есть он имеет тот же размер и местоположение (но не имеет реального содержимого). Я не уверен на 100%, что это работает для PDF-файлов, но я знаю, что это устраняет некоторые другие проблемы с z-индексами (например, поля выбора в IE6).

Прокладки iframe могут быть проблемой, если вы размещаете div динамически, так как вы должны перемещать прокладку iframe вместе с ним.

0 голосов
/ 29 октября 2012

Решением для некоторых обстоятельств является перенос iframe с помощью div и использование атрибута стиля «clip» на div или iframe parent. 

<!DOCTYPE html>
<html>
<head>
    <title>Test Page - IFramed PDF Document Clipping</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>

        <style type='text/css'>
            body {padding:0em;margin:0em;font-size:16px;position:relative;}
            body * {line-height:1em;}
            #TOPNAV {list-style:none;display:block;}
            #TOPNAV li {display:inline;}
            #IFRAMEWRAPPER 
            {
                display:block;margin:0em;padding:0em;
                position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
            }
            #docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
            input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
            .clearfix {zoom:1;}
        </style>

        <script type='text/javascript'>
            $(document).ready(function () {

                $('#TOPNAV input').click(function () {
                    $("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
                    $(this).toggleClass('ACTIVE');
                    $("#IFRAMEWRAPPER").css("padding", "1em");
                    $("#IFRAMEWRAPPER").css("padding", "0em");

                    $("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
                    $("#IFRAMEWRAPPER").toggleClass("clearfix");
                    $("#IFRAMEWRAPPER").hide();
                    $("#IFRAMEWRAPPER").slideDown(2);
                });

                $('#btnCLICK1').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
                });
                $('#btnCLICK2').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
                });
                $('#btnCLICK3').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
                });
                $('#btnCLICK4').click(function () {
                    $("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
                });
            });
        </script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
    <ul id='TOPNAV'>
        <li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
        <li><input type='button' id='btnCLICK2' value='LEFT' /></li>
        <li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
        <li><input type='button' id='btnCLICK4' value='TOP' /></li>
    </ul>
</div>
<div id="IFRAMEWRAPPER">
    <iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>

</body>
</html>
0 голосов
/ 27 февраля 2009

Если вы тестируете IE, это может быть та же проблема, что и в ComboBox Попробуйте вставить iframe в div.

...