今天研究了下用javascript結(jié)合DIV來(lái)制作當(dāng)前窗體顯示模式窗體,并使子窗體不能操作的一個(gè)小例子!

這個(gè)效果我通過(guò)參考賽我網(wǎng)上的個(gè)別效果而參考而來(lái),他的比較復(fù)雜,因?yàn)榻Y(jié)合了其他的一些功能,在這里我就是簡(jiǎn)要的總結(jié)下這個(gè)效果的一點(diǎn)原理:

第一步:定義一個(gè)浮于基層之上的DIV浮動(dòng)層,默認(rèn)顯示模式為隱藏,相關(guān)代碼如下:


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


第二步:定義一個(gè)包含iframe的浮動(dòng)Div對(duì)象,寬高都是100%,背景色為白色,設(shè)置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>


第三步:制作輸出內(nèi)容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="關(guān)閉" /></a></div>
  </div>
</div>
<div class="modalbody">
  希望能大家多多交流!
</div>
</div>


第四步:編寫相關(guān)javascript腳本:

<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>
效果演示
下載此文件

最新評(píng)論