Tuesday, 18 December 2012

Javascript Popup with background blocked

Created a simple .aspx page to show Javascript Popup, which will block the background.

To implment this, we need to create.
  1. Css - style for DIV
  2. JavaScript - to support this functionality
  3. DIV tage in .aspx page - used to show/hide on click
  4. Button - to get Event

Following is the simple sample code that, You can use for this fucntionality.

<html>
<
head>
<script type="text/javascript">function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)cvr.style.display =
"block"dlg.style.display = "block"if (document.body.style.overflow = "hidden") {cvr.style.width =
"1024"cvr.style.height = "100%"}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)cvr.style.display =
"none"dlg.style.display = "none"document.body.style.overflowY = "scroll"}
</script>

<style type="text/css">#cover {
display: none;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: gray;
filter: alpha(Opacity = 50);
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5}
#dialog {
display: none;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
position: absolute;
z-index: 100;
background: white;
padding: 2px;
font: 10pt tahoma;
border: 1px solid gray}
</style>
</
head><
body><
form runat="server"><
div id="cover"></div><
div id="dialog">Popup DIV<br/><input type="text"/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br/><input type="button" value="Submit"/><br/><a href="#" onclick="closePopUp('dialog');">[Close]</a></
div><
a href="#" onclick="showPopUp('dialog');">Show</a></
form></
body></
html>

No comments:

Post a Comment