Solved

Move Div to visible screen

Posted on 2011-09-27
4
196 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML question 2 27
Boolean 13 24
allow link tag to be submit like form 11 16
HTML CSS and  Table design 4 14
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 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