asked on

Move Div to visible screen

Ive been using some code to pop-up a simple modal dialog, which has worked perfect for me recently, however Ive now got a case where it has a little problem.

If there is lots of lines on the page (doesnt all fit on one page) then when the pop-up is called, it scrolls to the top and displays the div. Unfortantly when it closes the position of the page is at the top.

Is it possible to keep the scroll position of the page, and pop-up in the middle of the visible screen?

I havnt a clue to find out where the scroll window is, and how to display it in the middle, so any assistance would be appriciated.

To try and show you my issue, and hopefully someone show me how I can solve my issue, I have written a simple example:-

<HTML>
<HEAD>
<style type="text/css">
#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%;
	height:100%;
	text-align:center;
	z-index: 1000;
	background: url(bg.png);
	background-repeat: repeat;
}
#overlay div {
	width:300px;
	margin: 100px auto;
	background-color: #fff;
	border:1px solid #000;
	padding:15px;
	text-align:center;
}

#popup {
        background-color: grey !important;
		opacity:1 !important;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity:1.0;
        -khtml-opacity: 1.0;
        opacity: 1.0;
}
  
</style>
<script type="text/JavaScript">
function overlay() {
	el = document.getElementById("overlay");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
	}
</script>



</HEAD>
<BODY>
test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>
<a href='#' onclick='overlay()'>Click here to show the overlay</a>


<div id="overlay" style="">
	<div id="popup">
		<p>Content you want the user to see goes here.</p>
		Click here to [<a href='#' onclick='overlay()'>close</a>]
	</div>
</div>
test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>test</BR>
</BODY>
</HTML>

Open in new window

Background image used-

ASKER CERTIFIED SOLUTION

crysallus

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

crysallus

oops. Remove the <div id="base" ...> That's a leftover from testing. I removed the closing tag, forgot the opening one in my haste to submit.

tonelm54

ASKER

Good morning,
Thanks for the reply.

The problem with the code is that the position has to stay absolute as it needs to display on top of all other controls on the page, however if I change the control back to absolute, the div shows at the top of the page, and not where the user has scrolled to :-(

Also, by putting the 'return false' in the code, doesnt seem to disable the controls on the page, which the DIV is active.

Any ideas? :-(

crysallus

Good evening... (I'm in Australia)

What browser are you testing with?

Having it fixed displayed it above everything else in FF6, which seemed right to me. If you have it absolute, the only way you are going to have it position correctly is with some significantly more complicated scripting, and it wont stay on the screen if you scroll it up or down without some even more complicated scripting. It can be done with quite a bit of work, but are you sure having it fixed isn't the right thing to do, because that is a lot simpler.

And again, the return false seemed to produce the correct behaviour for me in FF6 too.