2012-10-17 193 views
0

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

但是,当Fancybox没有打开,即他们正在查看包含Map的页面内容时。我希望用户有能力打印页面。

我已经尝试过使用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和谷歌地图的脚本。如果该代码有帮助,请让我知道。任何帮助表示赞赏!

+0

您检查了http://stackoverflow.com/a/11739627/1055987? – JFK

回答

0

在iframe中打开fancybox并从其中调用打印件。由于它位于iframe中,所以打印命令将只能看到它并因此将其打印出来。如果fancybox已关闭,则可以从另一个按钮(外部iframe)呼叫打印整个页面