手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >利用js+css简单实现半透明遮罩弹窗
利用js+css简单实现半透明遮罩弹窗
摘要:思路:两个div,一上一下。上面的包含iframe,用以展示弹窗内容。下面的div实现半透明的遮罩效果。代码:其中下面的div设置css。为...

思路:

两个div,一上一下。上面的包含iframe,用以展示弹窗内容。下面的div实现半透明的遮罩效果。

代码:

<div id="div_window2"><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"></div>

其中下面的div设置css。为了兼容ie和火狐半透明要写两句:opacity:0.8; filter:alpha(opacity=80)

展示弹窗时把两个div都显示出,并赋予iframe地址。关闭时关闭两个div。

最终效果下面的div遮盖了弹窗以外的html元素,避免发生误操作。实现起来简简单单。

【利用js+css简单实现半透明遮罩弹窗】相关文章:

用CSS实现文字的阴影效果

利用CSS实现禁止双击选择页面内容的实例展示

纯css实现的tab切换效果

input输入框中有图片怎么使用css布局实现

用css实现透视效果

用CSS实现表单form布局

css div实现的遮罩层完美兼容IE6-IE9 FireFox

利用css实现图片等比例缩放

一款css实现的鼠标经过按钮的特效

div+css实现的滑动门

精品推荐
分类导航