How To Open div popup with a LightBox effect

In this post, I will show you how to open a lightbox pop up in asp.net

  
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DivBox.aspx.cs"  
Inherits="DivBox" %>  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
<head runat="server">  
  <title>Untitled Page</title>  
  <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 = '50px';  
  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 style="height:2000px">  
  <form id="form1" runat="server">  
  <div>  
  
  
<a href="javascript:void(showBox())">Toggle box</a>  
   
  
  </div>  
  </form>  
</body>  
</html>

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru