Skip to main content

How To Open div popup with a LightBox effect




<%@ 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>

Comments

  1. this works great, only problem is that I have drop downs in a template field in a gridview and they keep showing ontop of the popup. the rest of the controls are no clickable as expected

    ReplyDelete
  2. This work it.. bt i want to make html table in div . In html table there is label and textbox. how to do it.. thanks

    ReplyDelete
  3. That's because these controls are rendered by Internet Explorer, after all other controls are rendered. You can fix this by looping through all these types of controls and setting the Visibility attribute to False.

    After closing the popup, loop through this collection of controls again, and reset the visibility attribute to True.

    ReplyDelete
  4. great job,

    I want to make html table in div, would you please help me?

    ReplyDelete
  5. its great its working fine
    thank you!!!!!!

    ReplyDelete
  6. Great Code, Great Look, just one question...
    Its possible to open a dataGridView databind data on the popUp?
    Thanks

    ReplyDelete
  7. @Bruno:Yes you can,but I will suggest used Jquery Model dialog for this

    http://jqueryui.com/demos/dialog/

    ReplyDelete

Post a Comment

Popular posts from this blog