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
The ASP.NET Wiki was started by Scott Hanselman in February of 2008. The idea is that folks spend a lot of time trolling the blogs, googlinglive-searching for answers to common "How To" questions. There's piles of fantastic community-created and MSFT-created content out there, but if it's not found by a search engine and the right combination of keywords, it's often lost.
The ASP.NET Wiki articles moved to CodeProject in October 2013 and will live on, loved, protected and updated by the community.