思路:
兩個div,一上一下。上面的包含iframe,用以展示彈窗內容。下面的div實現半透明的遮罩效果。
代碼:
<div id=”div_window2″ style=”z-index:600;left:0px; visibility:hidden; width:100%; position:absolute; height:100%;”> <table width=”99%” height=”99%” border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center”> <tr> <td width=”100%” height=”100%” align=”center”> <iframe id=”iframe_window” width=”445″ height=”252″ noresize scrolling=”no” frameborder=”0″ marginheight=”0″ marginwidth=”0″ topmargin=”0″ leftmargin=”0″ align=”center”></iframe> </td> </tr> </table></div><div id=”div_window” style=”z-index:200;left:0px;visibility:hidden;width:100%;position:absolute;height:100%;background-color: #ffffff;opacity:0.8; filter:alpha(opacity=80)”></div>
其中下面的div設置css。為了兼容ie和火狐半透明要寫兩句:opacity:0.8; filter:alpha(opacity=80)
展示彈窗時把兩個div都顯示出,并賦予iframe地址。關閉時關閉兩個div。
最終效果下面的div遮蓋了彈窗以外的html元素,避免發生誤操作。實現起來簡簡單單。
新聞熱點
疑難解答