6

I am working with software that does not allow me to directly edit the html on each page. Instead I can add code to the header and footer in order to make edits to text and code in the body of the page.

I would like this popup window to center on the page instead of appearing at the top and off to the side:

<a onclick="javascript:window.open('https://www.thelink.org/faf/login/loginParticipantPopUp.asp?ievent=1138380','loginwin','menubar=no,scrollbars=yes,resizable=yes,width=400,height=200')" href="#">click here</a>

http://jsfiddle.net/jelane20/gt1ykmxs/

Any suggestions would be greatly appreciated to be able to edit the attributes for the popup window.

Jenny
  • 781
  • 1
  • 9
  • 24
  • You answer is here: [http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen](http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen) – Kyle Williamson Apr 21 '15 at 16:33
  • Of the top of my head, I would get the entire width and the height, divide them by 2 and and then add it to the `screenleft` – Magesh Kumaar Apr 21 '15 at 16:35
  • 1
    http://jsfiddle.net/adeneo/gt1ykmxs/1/ – adeneo Apr 21 '15 at 16:39
  • I am not able to directly edit the html in the body, I need to add the values via the header or the footer. How can I add the values via js added the footer? – Jenny Apr 21 '15 at 16:56

2 Answers2

0

you can add top and left values :

<a onclick="javascript:window.open('https://www.thelink.org/faf/login/loginParticipantPopUp.asp?ievent=1138380','loginwin','menubar=no,scrollbars=yes,resizable=yes,width=400,height=200,top=100,left=100')" href="#">click here</a>

you just need to calculate the values depending on the screen size and the size of the popup

Khalid
  • 4,730
  • 5
  • 27
  • 50
  • I am not able to edit the code directly, I know which values that I need to add but I am having trouble adding the values since I cannot directly edit the body of the page. I have to use js to add the values, I can edit the header and footer of the page but not the body. I have to use js in the footer to edit the body, hope that makes sense. – Jenny Apr 21 '15 at 16:51
0

See this fiddle

Since you are not able to edit the markup directly, use a javascript to change the onClick attribute. You may have to do this in onLoad(). But here, i have done this with the help of a button. When the button is clicked a JavaScript function, setClick() is called which changes the onClick attribute to the required url. After that you can just click the link and this generates a popup at the center of the screen.

The center of the screen is calculated using Javascript.

What i have done to get the link, is using document.getElementsByTagName("a")[0], which gets the first <a> tag. Similrly you can search for the <a> in your code too and follow the same procedure..

Try this..

HTML

<a onclick="javascript:window.open('https://www.thelink.org/faf/login/loginParticipantPopUp.asp?ievent=1138380','loginwin','menubar=no,scrollbars=yes,resizable=yes,width=400,height=200')" href="#">click here</a>

<input type="button" value="Change URL" onclick="setClick();">

JavaScript

function changeURL() {
    var left = (screen.width / 2) - (400 / 2);
    var top = (screen.height / 2) - (200 / 2);
    var url = "javascript:window.open('https://www.thelink.org/faf/login/loginParticipantPopUp.asp?ievent=1138380','loginwin','menubar=no,scrollbars=yes,resizable=yes,width=400,height=200, top=" + top + ", left=" + left + "')";
    return url;
}

function setClick() {
    document.getElementsByTagName("a")[0].setAttribute("onClick", changeURL());
}
Lal
  • 14,726
  • 4
  • 45
  • 70
  • Hey @Jenny, what is the console error that you are getting? Meanwhile are you sure you are using the right index for the anchor tag... if the concerned anchor is second or third in the generated html, then you should be using`document.getElementsByTagName("a")[1].setAttribute("onClick", changeURL());` or `document.getElementsByTagName("a")[2].setAttribute("onClick", changeURL());` respectively. – Lal Apr 22 '15 at 06:11