用Div仿showModalDialog模式菜單的效果的代碼

2019-11-21 02:14:43

字體：大中小

來源：轉載

供稿：網友

今天研究了下用javascript結合DIV來制作當前窗體顯示模式窗體,并使子窗體不能操作的一個小例子!

這個效果我通過參考賽我網上的個別效果而參考而來,他的比較復雜,因為結合了其他的一些功能,在這里我就是簡要的總結下這個效果的一點原理:

第一步:定義一個浮于基層之上的DIV浮動層,默認顯示模式為隱藏,相關代碼如下:

<div id="buySelName" class="modalDiv" style="position:absolute;left:300px; top:140px;z-index:2;display:none;">
</div>

第二步:定義一個包含iframe的浮動Div對象,寬高都是100%,背景色為白色,設置alpha透明度為50%,主要作用能顯示較好的效果;

<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:

<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="close.gif" alt="關閉" /></a></div>
  </div>
</div>
<div class="modalbody">
  希望能大家多多交流!
</div>
</div>

第四步:編寫相關javascript腳本:

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
效果演示
下載文件