• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

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- Background image
0
tonelm54
Asked:
tonelm54
  • 3
1 Solution
 
crysallusCommented:
It's happening because as well as calling your event code to open/close the dialog, it's also navigating to the href #, which is why it keeps going to the top of the page. If you add return false to each anchor tag onclick, it will work correctly. I also changed the position on the overlay from absolute to fixed, as I think that's what you're after.

<HTML>
<HEAD>
<style type="text/css">
#overlay {
        visibility: hidden;
        position: fixed;
        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";
		return false;
        }
</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>
<div id="base" style="position:relative;">
<a href='#' onclick='overlay();return false;'>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();return false;'>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

0
 
crysallusCommented:
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.
0
 
tonelm54Author Commented:
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? :-(
0
 
crysallusCommented:
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.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now