今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子!
这个效果我通过参考赛我网上的个别效果而参考而来,他的比较复杂,因为结合了其他的一些功能,在这里我就是简要的总结下这个效果的一点原理:
第一步:定义一个浮于基层之上的DIV浮动层,默认显示模式为隐藏,相关代码如下:
<divid="buySelName"class="modalDiv"style="position:absolute;left:300px;top:140px;z-index:2;display:none;">
</div>
第二步:定义一个包含iframe的浮动Div对象,宽高都是100%,背景色为白色,设置alpha透明度为50%,主要作用能显示较好的效果;
<divid="disableDiv"style="position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;background-color:#000000;border:0pxnone#000000;FILTER:alpha(opacity=50);display:none;";><iframesrc="about:blank"name="hiddenIframe"width="100%"height="100%"></iframe></div>
第三步:制作输出内容DIV:
<divid="objText"style="display:none;">
<divclass="modalheader">
<divclass="header">
<divclass="mleft">
<divclass="boxheader-text"><spanclass="b">显示窗体</span></div>
</div>
<divclass="btnright"><ahref="javascript:ShowModal('buy');"><imgsrc="close.gif"alt="关闭"/></a></div>
</div>
</div>
<divclass="modalbody">
希望能大家多多交流!
</div>
</div>
第四步:编写相关javascript脚本:
<SCRIPTLANGUAGE="JavaScript">
<>
</SCRIPT>
效果演示
下载此文件
【用Div仿showModalDialog模式菜单的效果的代码】相关文章：
★ 使用RequireJS优化JavaScript引用代码的方法
★ Javascript实现图片轮播效果(二)图片序列节点的控制实现
★ 详解JavaScript中Date.UTC()方法的使用