0

我试图让用户能够在 Fancybox 打开时打印 Fancybox 的内容。Fancybox 的内容是它自己的 div 内的 Google 地图方向面板。基本上我想让用户能够打印他们刚刚完成搜索的方向。

但是，当 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 Maps 脚本。如果该代码有帮助，请告诉我。任何帮助表示赞赏！

4

1 回答 1

0

在 iframe 中打开 fancybox 并从其中调用 print。由于它在 iframe 内，打印命令只会看到它并因此打印它。如果fancybox关闭，您可以从另一个按钮（iframe外部）调用print来打印整个页面

于 2012-10-17T20:26:19.300 回答