用Div仿showModalDialog模式菜单的效果的代码

摘要：今天研究了下用javascript结合DIV来制作当前窗体显示模式窗体,并使子窗体不能操作的一个小例子!这个效果我通过参考赛我网上的个别效果...

今天研究了下用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>

<divclass="modalbody">

希望能大家多多交流!

</div>

第四步:编写相关javascript脚本:

<SCRIPTLANGUAGE="JavaScript">

</SCRIPT>

效果演示

下载此文件