Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Light Weight PopUp

0.00/5 (No votes)
1 Sep 2010 1  
Hello Friends Here we have a javascript and CSS code to create a light weight popupson Code Behind <input id=Button1 type=button

This articles was originally at wiki.asp.net but has now been given a new home on CodeProject. Editing rights for this article has been set at Bronze or above, so please go in and edit and update this article to keep it fresh and relevant.

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

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here