Solved

Pop up appears on absolute position on page

Posted on 2012-12-22

1 solution

Medium Priority

223 Views

Last Modified: 2012-12-24

Hi all,

I have a pop up and I want it to appear about 1/3 of the page down and to the left of the screen. Could someone give me an example of how to change the code to do this and I will then be able to play around with the exact coordinates. Here is the code for it that I need to alter:

<a href="#" onclick="Popup=window.open('http://www.r.com/module/r/template/default/controller/enq/questionpopup.php','Popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no, width=715,height=150,left=430,top=23'); return false;">

Open in new window

Comment

Question by:TLN_CANADA

[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

Join The Community

3 Comments

LVL 42

Accepted Solution

by:sedgwick

sedgwick earned 2000 total points

ID: 387169072012-12-23

just play with the the left,top calculations to get exactly the position you want:

<a href="javascript:void(0);" onclick="PositionPopup('http://www.r.com/module/r/template/default/controller/enq/questionpopup.php', 'Popup',715,150); return false;">

 <script type="text/javascript">
							  function PositionPopup(pageURL, title,w,h) {
var left = (screen.width/6)-(w/6);
var top = (screen.height/6*5)-(h/6*5);
var targetWin = window.open (pageURL, title, 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
								  </script>

Open in new window

Author Comment

by:TLN_CANADA

ID: 387174962012-12-23

Thanks! That's working perfectly now. One other small question about this if I may.

I have no different pop ups on the page that I want the user to be able to use both or separately as they wish.

Here is the code for the new popups:

			<a href="#" onclick="Popup=window.open('http://www.xxxx.com/','Popup','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=no, width=600,height=490,left='+(screen.width-600)+',top=0'); return false;"><img src="res/imer.png"></a>
			
			<a href="javascript:void(0);" onclick="PositionPopup('http://www.xxdfdx.com/module/x/template/default/controller/enq/questionpopup.php', 'Popup',715,150); return false;"><img src="res/generate_question.png"></a>

Open in new window

At the moment when I open both pop ups the second one overrides the first one but I want them to appear in separate popup windows.

Thanks for your help,

Derek

LVL 42

Expert Comment

by:sedgwick

ID: 387180252012-12-24

you have to use unique name for each popup to prevent overriding (since both windows called 'Popup')

Featured Post

Question has a verified solution.

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

Beginner's Guide to HTML and CSS

Article by: Experts Exchange

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.

Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js

Article by: Serhiy

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.

Corner Ribbon Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon": Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

HTML
CSS

Introduction to HTML (Part 2)

Video by: Jason

HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…