How to grey-out the html page but pop-up a interactive dialog box?

**mvellore** · 02-23-2007, 10:18 AM

Hi,

This is mahesh here.

I have a query.

My programming requirement is as follows:

whenever a user clicks a link, html background should become grey in color and in turn pop-up window should be made visible where in the user has to enter his name and other details. all links on the html should be made inactive.

looking forward to your help. please bail me out.

Regards,
A budding programmer.

**mburt** · 02-23-2007, 11:20 AM

I believe there is a similar script here on dd, but try this one:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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&#37;"
	}
}
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:200px;
top:200px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray
}
</style>
</head>
<body>
<div id="cover"></div>
<div id="dialog">
	My Dialog Content
	<br><input type="text">
	<br><input type="button" value="Submit">
	<br><a href="#" onclick="closePopUp('dialog');">[Close]</a>
</div>
<a href="#" onclick="showPopUp('dialog');">Show</a>
</body>
</html>

Edit the above in red for what you want to be in the box that will be displayed.

**mvellore** · 02-26-2007, 08:45 AM

Thanks a lot mburt for the code given to me, but i have only one issue.

The code doesn't go well with IE7. it works only if activeX controls are enabled. Is there any solution for this. Please help me.

**mburt** · 02-26-2007, 08:28 PM

The code doesn't go well with IE7. it works only if activeX controls are enabled.

I see. You are using Internet Explorer: if you don't have JavaScript enabled this annoying pop-up will keep bugging you until you do enable it. And yes, JavaScript is the only way to do this dynamically. As for the IE7 bit: I don't have it downloaded as of now, but once I do I will test it.

**moyerc** · 04-20-2008, 03:30 AM

The script works great but how can i make the dialog box draggable by the user. I dont know what code i would need to do that.

thank you

Curt

Thread: How to grey-out the html page but pop-up a interactive dialog box?

Thread Tools

Search Thread

How to grey-out the html page but pop-up a interactive dialog box?

Need one more feature

Bookmarks

Bookmarks

Posting Permissions