Home > Web Front-end > JS Tutorial > Code to use Div to imitate the effect of showModalDialog mode menu_javascript skills

Code to use Div to imitate the effect of showModalDialog mode menu_javascript skills

PHP中文网
Release: 2016-05-16 19:18:11
Original
1441 people have browsed it

Today I studied a small example of using javascript combined with p to create the current form display mode form and make the subform inoperable!
I referenced this effect by referring to the individual effects on the website. Come on, his is more complicated because it combines some other functions. Here I will briefly summarize the principles of this effect:
Step 1: Define a p floating layer that floats above the base layer, which is displayed by default. The mode is hidden, and the relevant code is as follows:

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

Step 2: Define a floating p object containing an iframe, with width and height of 100%, background color as white, and alpha transparency set to 50 %, the main function can show better results;

<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>
Copy after login

Step 3: Make output content 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>
Copy after login

Step 4: Write related javascript:

<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>
Copy after login
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template