Light Weight PopUp

Hello Friends 

Here we have a javascript and CSS code to create a light weight popups

on Code Behind

<div>
<input id="Button1" type="button" value="Click To Popup" onclick="ShowDiv('DivOrderSearch','DivLayer')" />
</div>
  <div id="DivLayer" class="DialogueBackground">
</div>
<div id="DivOrderSearch" style="width: 400px; height: 300px; background-color: #D9E0E6;"
  class="Dialogue">
  <div class="DialogueTitle">
Popup Sample
</div>
  <div class="DialogueImg" onclick="HideDiv('DivOrderSearch');" title="Close">
</div>
<div style="padding: 10px;">
Hello World
</div>
</div>

Add javascripts

function HideDiv(PopUpDiv) {
var DivPopUp = document.getElementById(PopUpDiv);
var DivLayer = document.getElementById('DivLayer');
DivPopUp.style.display = "none";
DivLayer.style.width = "0%";
}
function ShowDiv(PopUpDiv, LayerDiv) {
var DivPopUp = document.getElementById(PopUpDiv);
var DivLayer = document.getElementById(LayerDiv);
DivPopUp.style.display = "block";
DivLayer.style.width = "100%";
DivPopUp.style.top = document.documentElement.clientHeight / 2 - DivPopUp.style.height.replace('px', '') / 2 + 'px';
DivPopUp.style.left = document.body.offsetWidth / 2 - DivPopUp.style.width.replace('px', '') / 2 + 'px';
return false;
}

Few Css Classes

.DialogueBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.50;
position: fixed;
left: 0;
top: 0;
width: 0%;
height: 100%;
}

.Dialogue
{
background-color: White;
display: none;
z-index: 2;
border: 1px solid Black;
position: fixed;
text-align: center;
}
.DialogueImg
{
height: 30px;
position: absolute;
width: 27px;
float: right;
background-image: url(../images/closebox.png);
cursor: pointer;
right: -15px;
top: -15px;
background-repeat: no-repeat;
border: 0;
}
.DialogueTitle
{
font-size: small;
font-weight: bolder;
padding: auto;
height: 25px;
color: #ffffff;
position: relative;
background: url(../images/app_tab2.jpg) repeat-x;
top: 0px;
}

use this two images for Close button and TitleBackground

All the Best

You must Login to comment.