0

Fancybox が開いているときに、ユーザーが Fancybox の内容を印刷できるようにしようとしています。Fancybox のコンテンツは、独自の div 内にある Google マップの directionPanel です。基本的には、ユーザーが検索を終えた道順を印刷できるようにしたいと考えています。

ただし、Fancybox が開いていない場合、つまり、マップを含むページのコンテンツを見ている場合。ユーザーがページを印刷できるようにしたい。

CSS を使用して、コードのセクションを「印刷可能」および「印刷不可」として作成しようとしましたが、明らかにこれは私の目的に反します。

これが私の現在のコードです：

   <style type="text/css">

    -->#printable { display: none; }

    @media print
    {
        -->#non-printable { display: none; }
        -->#printable { display: block; }
        body * { visibility: hidden; }
        #directionsPanel * { visibility: visible; }
        #directionsPanel { position: absolute; top: 1px; left: 1px; }

    }
    </style>



  </head>
  <body onLoad="initialize()">
    <table>
        <tr>
            <td>
                <input name="start_address" id="address" type="text" value="Enter Address" onFocus="doClear(this)" size="45"/>
            </td>
        </tr>
        <tr align="center">
            <td align="center">
                <a id="portDirectionBtn" class="fancybox" href="#directionsPanel" onClick="calcRoute();">Get Directions</a>
            </td>
        </tr>
    <div id="map_canvas" style="width:300px; height:300px">
    </div>
    <div id="printable">
    <div id="directionsPanel">
        <a href="javascript:window.print();">Print!</a><br />
    </div>
    </div>
    </table>

  </body>
</html>

さらに、明らかに Fancybox と Google マップのスクリプトも含まれています。そのコードが役立つ場合は、お知らせください。どんな助けでも大歓迎です！

4

1 に答える 1

0

ファンシーボックスを iframe で開き、その中から print を呼び出します。これは iframe 内にあるため、印刷コマンドはそれのみを表示して印刷します。ファンシーボックスが閉じている場合は、別のボタン（iframeの外側）から印刷を呼び出して、ページ全体を印刷できます

于 2012-10-17T20:26:19.300 に答える