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.

PHP BASIC

Thursday 25 October 2012

How to show & hide overlay on onclick

2 comments: