Solved

Move Div to visible screen

Posted on 2011-09-27
4
190 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

867 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now