用Div仿showModalDialog模式菜单的效果(2) disable.style.display='none'; }}//--></SCRIPT>
整体效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>用Div仿showModalDialog模式菜单的效果</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Key<a href="http://www.xgdown.com/article/293/ArticleList293_1.htm" target="_blank" title="Word技巧">Word</a>s" CONTENT=""> <META NAME="Description" CONTENT=""> <STYLE TYPE="text/<a href="http://www.xgdown.com/article/38/ArticleList38_1.htm" target="_blank" title="<a href="http://www.xgdown.com/soft/24862.htm" target="_blank" title="CS游戏下载">CS</a>S技巧">CSS</a>" > body{ background:#eaeaea; font-size:12px; } img{border:0;} .b{ font-weight:bold; color:white; } .modalDiv{ width:311px; height:274px; background:url(http://www.17sohoo.com/js/showmodal/modalbg.gif) no-repeat; } .modalheader{ margin:2px; padding:2px; } .header{ margin:0; padding:0; } .mleft{ width:280px; float:left; } .mright{ float:right; } .modalbody{ margin:10px; padding:2px; color:blue; } </STYLE> </HEAD> <BODY> <input type="button" name="btnshow" id="btnshow" value="显示隐藏Modal" onClick="ShowModal('buy');" /> <div id="buySelName" class="modalDiv" style="position:absolute;left:300px; top:140px;z-index:2;display:none;"> </div> <div id="disableDiv" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color:#000000; border: 0px none #000000; FILTER:alpha(opacity=50);display:none;";><iframe src="about:blank" name="hiddenIframe" width="100%" height="100%"></iframe></div> <div id="objText" style="display:none;"> <div class="modalheader"> <div class="header"> <div class="mleft"> <div class="boxheader-text"><span class="b">显示窗体</span></div> </div> <div class="btnright"><a href="javascript:ShowModal('buy');"><img src="http://www.17sohoo.com/js/showmodal/close.gif" /></a></div> </div> </div> <div class="modalbody"> 希望能大家多多交流! </div> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- function ShowModal(dname) { var buyDiv=document.getElementById(dname+'SelName'); var objDiv=document.getElementById('objText'); var disable=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> </BODY> </HTML>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
