Categories
Asp, Asp.net

How To Show DIV In Pop Up With Lightbox Effect

How To Show DIV In Pop Up With Lightbox Effect

In this post we will learn How To Show DIV In Pop Up With Lightbox Effect. Here we are using Javascript to accomplish this.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How To Show DIV In Pop Up With Lightbox Effect</title>
<style type="text/css">
body {
width: 980px;
margin: 0px auto;
text-align: center;
padding-top: 50px;
font-size: 20px;
height:1000px;
}
</style>
<script type="text/javascript">
function showBox()
{
  var width = document.documentElement.clientWidth + document.documentElement.scrollLeft;

  var layer = document.createElement('div');
  layer.style.zIndex = 2;
  layer.id = 'layer';
  layer.style.position = 'absolute';
  layer.style.top = '0px';
  layer.style.left = '0px';
  layer.style.height = document.documentElement.scrollHeight + 'px';
  layer.style.width = width + 'px';
  layer.style.backgroundColor = 'black';
  layer.style.opacity = '.6';
  layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=60)");
  document.body.appendChild(layer);

  var div = document.createElement('div');
  div.style.zIndex = 3;
  div.id = 'box';
  div.style.position = (navigator.userAgent.indexOf('MSIE 6') > -1) ? 'absolute' : 'fixed';
  div.style.top = '200px';
  div.style.left = (width / 2) - (400 / 2) + 'px'; 
  div.style.height = '100px';
  div.style.width = '400px';
  div.style.backgroundColor = 'white';
  div.style.border = '2px solid silver';
  div.style.padding = '20px';
  document.body.appendChild(div);

  var p = document.createElement('p');
  p.innerHTML = 'Some text';
  div.appendChild(p);

  var a = document.createElement('a');
  a.innerHTML = 'Close window';
  a.href = 'javascript:void(0)';
  a.onclick = function()
  {
    document.body.removeChild(document.getElementById('layer'));
    document.body.removeChild(document.getElementById('box'));
  };
 
  div.appendChild(a);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>How To Show DIV In Pop Up With Lightbox Effect</h1>    
<a href="javascript:void(showBox())">POP Up</a>
<br /><br />
<br /><br />
All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a> |
Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>
</div>
</form>
</body>
</html>