Solved

Move Div to visible screen

Posted on 2011-09-27
4
192 Views
Last Modified: 2012-06-27
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
Comment
Question by:tonelm54
  • 3
4 Comments
 
LVL 8

Accepted Solution

by:
crysallus earned 500 total points
ID: 36713332
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
 
LVL 8

Expert Comment

by:crysallus
ID: 36713340
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
 

Author Comment

by:tonelm54
ID: 36716150
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
 
LVL 8

Expert Comment

by:crysallus
ID: 36716182
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

Does Powershell have you tied up in knots?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question