showModalDialog 모드 menu_javascript 기술의 효과를 모방하기 위해 Div를 사용하는 코드-JS 튜토리얼-php.cn

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

PHP中文网

풀어 주다： 2016-05-16 19:18:11

원래의

1440명이 탐색했습니다.

오늘은 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>

로그인 후 복사