Home > Web Front-end > JS Tutorial > js implements the window function code for closing the js pop-up layer

js implements the window function code for closing the js pop-up layer

怪我咯
Release: 2017-07-04 15:24:56
Original
2145 people have browsed it

This article mainly introduces the sample code for using js to close the window of the js pop-up layer. Friends who need it can come and refer to it. I hope it will be helpful to everyone

<script type="text/javascript">
function toggle() {
  theObj = document.getElementById(&#39;Sunyanzi&#39;).style;
  if (  theObj.display == "none" ) theObj.display = "block"; else theObj.display = "none";
}
</script>
<p id="Sunyanzi" style="display:none">你看我出现了~~~</p>
<br />
<input type="button" onclick="toggle()" value="点一下试试看 ...?" />
Copy after login

Two methods: remove and hide

//创建你的弹出层   
    var dvMsg = document.createElement("p");  
    strHtml =  "<p class=&#39;####&#39;>弹出层内容</p>" 
    strHtml += " <p class=&#39;####&#39;><input type=&#39;button&#39; value=&#39;关闭&#39; onclick=&#39;btnclick()&#39;></p>"
    dvMsg.innerHTML = strHtml;    
    document.body.appendChild(dvMsg);
// 关闭按钮     
btnclick = function (){                       
    document.body.removeChild(dvMsg);
Copy after login

-------------------------
Or the pop-up layer is marked with p id

<p id="tanchu">弹出层内容</p>
Copy after login

js

function open(){
document.getElementById(tanchu).style.display="";  //显示
}
function close(){
document.getElementById(tanchu).style.display="none";  //不显示(页面初始化的时候同样加载一遍)
}
Copy after login


The above is the detailed content of js implements the window function code for closing the js pop-up layer. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template