0

Sorry for such a silly doubt but I am new to HTML.

I made a simple pop up using anchor tag using below code:

<a href="http://mywebsite.com" 
  target="popup" 
  onclick="window.open('http://mywebsite.com','popup','width=600,height=600'); return false;">
    Open Link in Popup
</a>

This is working fine but I want this pop up to appear at center of the screen. I want to do it solely using anchor tag without using javascript.

Please suggest me the attributes to make it appear at center, if it is possible only with anchor tag(HTML only). Thank you.

noobmaster
  • 157
  • 9
  • 1
    Does this answer your question? [Center a popup window on screen?](https://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen) – Hkachhia Nov 16 '21 at 04:17
  • No, because I wanted to do this solely using anchor tag. But all the answers there are using javascript. I needed some attributes in anchor tag to define the pop up position. – noobmaster Nov 16 '21 at 04:25
  • @noobmaster, the expression that you're using right now in the `onclick` attribute is `Javascript` (very simple, but javascript) ... – Carlitos Way Nov 16 '21 at 04:32
  • @CarlitosWay ok So I am supposed to use script to center it then. I thought there might be some attributes like margin or position to change the position. But thanks, will do the js. – noobmaster Nov 16 '21 at 04:35
  • @noobmaster, according to the link provided by @Hkachhia, there are such attributes: it will be `top` and `left` ... you have to append them to the 3rd argument of your `windon.open` call ... The use of Javascript will help you to make such positioning dynamic based on the User screen monitor ... – Carlitos Way Nov 16 '21 at 04:40

1 Answers1

0

You can use the top and left options of the windowFeatures.

I really recommend you to use JavaScript for this, Instead of doing it inline, as the code is readable, and its easy to perform calculations.

document.querySelector("#openPopup").onclick = function() {
  let Y = window.outerHeight / 2 - 300;  /* 0.5 * windowHeight - 0.5 * popupHeight */
  let X = window.outerWidth / 2 - 300;   /* 0.5 * windowWidth - 0.5 * popupWidth */
  window.open("http://mywebsite.com", 'popup', `width=600,height=600,top=${Y},left=${X}`);
  return false;
}
<a id="openPopup" href="http://mywebsite.com" target="popup">
    Open Link in Popup
</a>

Here's a Fiddle link for same - https://jsfiddle.net/8yck6410/

If you wish to use inline anyway, here's the code

<a href="http://mywebsite.com" 
  target="popup" 
  onclick="window.open('http://mywebsite.com','popup',`width=600,height=600,top=${window.outerHeight/2 - 300},left=${window.outerWidth/2 - 300}`); return false;">
    Open Link in Popup
</a>
TechySharnav
  • 4,869
  • 2
  • 11
  • 29