今天研究了下用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">
<!--
functionShowModal(dname)
{
varbuyDiv=document.getElementById(dname+'SelName');
varobjDiv=document.getElementById('objText');
vardisable=document.getElementById('disableDiv');
if(buyDiv.style.display=='none')
{
buyDiv.style.display='block';
disable.style.display='block';
buyDiv.innerHTML=objDiv.innerHTML;

}else{
buyDiv.style.display='none';
disable.style.display='none';
}
}
//-->
</SCRIPT>
效果演示
下载此文件