PHP BASIC: How to show & hide overlay on onclick

When you display some important data and form like login etc, then you need to overlay hide and show on javascript function onClick.

At following, I am giving proper overlay code.

Javascript :   There is given javascript function, which used to show and hide overlay through onClick. There is given to function, these are following.

1. function loginForm(){
              document.getElementById("contentWrap").style.display="block";
          document.getElementById("overlay").style.display="block";
      }

For showing overlay and content.

2. function loginFormClose(){
        document.getElementById("contentWrap").style.display="none";
        document.getElementById("overlay").style.display="none";
    }

For hiding overlay and content.

CSS : Overlay effect shown due to style property, following css used for overlay display.

.overlay {
                 background:#000;
                 opacity:0.8;
                   filter:alpha(opacity=80);
   position:fixed;
   top:0px;
                   bottom:0px;
   left:0px;
                   right:0px;
   z-index:100;
                }

.contentWrap {
                          position:fixed;
top:50px;
                          color:#7F7F7F;
                          z-index:101;
                          width:100%;
                           margin:0 auto
}

Following is total code, just copy from text area and run browser and check how is this working.

<html>
<head>
<meta name="google" value="notranslate" />
	<style  type="text/css">
	.overlay { background:#000; opacity:0.8; filter:alpha(opacity=80); position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; }
	.contentWrap { position:fixed; top:50px; color:#7F7F7F; z-index:101; width:100%; margin:0 auto }
	.content { background:none repeat scroll 0 0 #FFF; height:100%; overflow:hidden; width:98%; padding:10px; margin-top: 122px;text-align: center;align:justify }
	.login-box { width:100%; float:left }
	</style>
	<script type="text/javascript">
	function loginForm(){
		document.getElementById("contentWrap").style.display="block";
		document.getElementById("overlay").style.display="block";
	}
	function loginFormClose(){
		document.getElementById("contentWrap").style.display="none";
		document.getElementById("overlay").style.display="none";
	}
	</script>
</head>
<body>
	<div class="overlay" id="overlay" style="display:none;">
</div>
<div class="contentWrap" id="contentWrap" style="display:none;">
		<div class="content">
			<div class="login-box">
				Name    : Tilak Raj Yadav<br/><br />
				Content : onClick show and hide Overlay css.<br/><br />
				Date    : Oct 2012<br/><br />
				Code    : CSS, JS, HTML<br/><br />
				<div onclick="loginFormClose();">
<input type="button" name="Clo" value="Click to close"></div>
</div>
</div>
</div>
<divstyle="cursor:pointer" >
	<input type="button" name="CloseNow" onclick="loginForm();"  value="Click to show overlay........................................................................................................................................................................................................................................................................................................................" style="margin: 249px 110px 0; padding: 42px;text-align: center;">
	</div>
</body>
</html>

Hope so it will helpful to you and following is screen shot of working site.

1.

Above is overlay effect showing.

4 comments:

Unknown25 October 2012 at 05:01
It's Perfect code for overlay..
Unknown25 September 2013 at 13:43
what should be changed if i want it as onload overlay?
Nikhil23 January 2026 at 01:51
A Python and Django course blends programming basics with framework expertise.It focuses on scalable application design.This Python and Django course enhances learning.It is dependable.
anjani0221 February 2026 at 22:56
⭐ BA Analyst Course Online
A structured BA analyst course online builds your expertise in requirement analysis and business strategy.
The curriculum includes gap analysis, UML diagrams, and use case development.
Hands-on exercises and assignments deepen your practical experience.
Live case studies simulate industry challenges to boost your skills.
Trainer support ensures clear learning of every module.
Flexible timings suit learners from different backgrounds.
This course sets you on a strong career path in business analysis.

Thursday, 25 October 2012

How to show & hide overlay on onclick

4 comments: