showModalDialog 모드 menu_javascript 기술의 효과를 모방하기 위해 Div를 사용하는 코드

오늘은 p와 결합된 자바스크립트를 사용하여 현재 양식 표시 모드 양식을 만들고 하위 양식이 작동하지 않게 만드는 작은 예를 연구했습니다.
웹사이트의 개별 효과를 참조하여 이 효과를 참조했습니다. 다른 기능을 결합하기 때문에 더 복잡합니다. 여기서는 이 효과의 원리를 간략하게 요약하겠습니다.
1단계: 기본 레이어 위에 떠 있는 p 플로팅 레이어를 정의합니다. 이 레이어는 기본적으로 숨겨져 있습니다. 관련 코드는 다음과 같습니다.

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

2단계: 너비와 높이가 100%이고 배경색이 흰색이고 알파 투명도가 50으로 설정된 iframe을 포함하는 부동 p 개체를 정의합니다. %, 주요 기능은 더 나은 결과를 보여줄 수 있습니다.

<p id="disablep" 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></p>

3단계: 출력 콘텐츠 p 만들기:

<p id="objText" style="display:none;"> 
<p class="modalheader"> 
  <p class="header"> 
   <p class="mleft"> 
    <p class="boxheader-text"><span class="b">显示窗体</span></p> 
   </p> 
   <p class="btnright"><a href="javascript:ShowModal(&#39;buy&#39;);"><img src="close.gif" alt="关闭" /></a></p> 
  </p> 
</p> 
<p class="modalbody"> 
  希望能大家多多交流! 
</p> 
</p>

4단계: 관련 자바스크립트 작성:

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function ShowModal(dname) 
{ 
  var buyp=document.getElementById(dname+&#39;SelName&#39;); 
  var objp=document.getElementById(&#39;objText&#39;); 
  var disable=document.getElementById(&#39;disablep&#39;); 
  if(buyp.style.display==&#39;none&#39;) 
  { 
   buyp.style.display=&#39;block&#39;; 
   disable.style.display=&#39;block&#39;; 
   buyp.innerHTML=objp.innerHTML; 
  }else{ 
   buyp.style.display=&#39;none&#39;; 
   disable.style.display=&#39;none&#39;; 
  } 
} 
//--> 
</SCRIPT>