How to position a popup window perfectly in the center without having direct access to the popup code

Currently, I am faced with the challenge of using software that does not allow direct editing of HTML on individual pages. Instead, I have the ability to add code to the header and footer to make modifications to the content within the body of each page.

My goal is to have the popup window centered on the page rather than 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/

If you have any suggestions or tips on how to modify the attributes for the popup window, your input would be greatly appreciated.

jqueryhtmlcss

Answer №1

By adjusting the top and left values, you can customize the position:

<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>

Simply calculate these values based on the screen size and popup dimensions.

Answer №2

Check out this online demo

If you're unable to directly modify the markup, you can utilize JavaScript to alter the onClick attribute. This can be achieved within an onLoad() function. In the provided example, a button triggers a JavaScript function called setClick(), which updates the onClick attribute with the desired URL. Subsequently, clicking the link generates a popup at the center of the screen.

The script calculates the center position using JavaScript.

To access the link, 

document.getElementsByTagName("a")[0]
is used to target the first <a> tag. Similarly, you can search for the <a> element in your own code and apply a similar approach.

Feel free to give it a try!

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());
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The method .slideUp() is not functioning as intended

My current project involves a page structure that looks like this: <div id="wrapper"> <div id="page_banner"> <canvas id="voucher_canvas"></canvas> <div id="div_voucher_img"><img id="voucher_img" src="" ...

jqueryhtmlslideup

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

javascriptjqueryhtmlcss

Align Image According to Dimensions of the Browser

I'm looking for a way to dynamically position an image based on the width and height of the browser within an HTML file. I know that adjusting an image's width/height is possible through code like this: <script> ...

javascriptjqueryhtmlcss

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

Ways to create intersecting borders at the corners of a division

Is there a technique to expand the borders of a div by 1 or 2 pixels in each direction so that they create a cross at each corner? https://i.stack.imgur.com/mUAxM.png ...

css

Is there a way to modify the size and color of a specific word in a CSS animation?

As a newcomer to CSS, I am exploring ways to change the font size and color of a specific word in my sentence after an animation. My initial attempt was to enclose the word within a span class like this: <h2>I'm <span style = "font-size: ...

htmlcss

Issues with custom slider functionality

I'm currently facing an issue with a slider I created. I want the next div to smoothly appear at the top of the screen, but on my jsfiddle example, it seems to come in at the bottom and then quickly moves to the top... http://jsfiddle.net/Gfzwp/ Your ...

jquery

Conceal certain elements from being printed by the client side on a website

Imagine logging into social media but not wanting to see the number of "likes" on posts as the page loads. For example, when you open a photo from a friend and underneath it shows "Somefriend, someotherfriend, and 123123 persons like this", you may want t ...

htmlbrowser

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

cssasp.netviewsrcshared

I'm looking to input user data into a table using a unique ID, but the console is alerting me with a "Warning: Each child in a list should have a unique 'key' prop." notification

Here's my custom Add User React component: import axios from "axios"; import { useState } from "react"; const CustomAddUserComponent: React.FC<{ fetchUserData: () => void }> = ({ fetchUserData, }) => { const [name, setName] = useState ...

htmlnode.jsreactjs

oversized user interface selection container

When using semantic-ui for my search form with large input fields, I am facing an issue where the select option field does not adjust its size. I have followed the documentation but it seems like I might be missing something. Can someone help me figure out ...

htmlcsssemantic-ui

Using jQuery to resize the window and duplicate the $(document).ready function allows for resizing and repositioning of elements

I'm currently working on a jQuery slider that spans the entire screen width and height. However, I'm facing an issue when resizing the window as the sizes need to be recalculated dynamically. I have attempted to duplicate the code on both trigger ...

jqueryresizewindow-resize

Choose a specific line within a paragraph using jQuery

Can jQuery be used to target a specific line within a paragraph of text? Without any predefined text to work with, I am unsure if REGEX would be helpful. For example, if a paragraph wraps into 5 lines, is it possible to apply a class to line number 3? I&a ...

jquery

Add a variety of icons to every item in a list using HTML

Is there a way to display multiple icons on the left side of each element, with the option to have none or many? If so, could you please guide me in the right direction. <header> <nav> <ul> <a href="http://localhost:4000 ...

htmlcssweb

Leveraging jQuery's .when and .then methods allows for

I'm attempting to utilize a shared ajax function that is meant to retrieve the value returned from the PHP script. function fetchAjax(url, data, type) { result = 0; $.when( $.ajax({ type: "POST", url: url, data: data, ...

javascriptjqueryajax

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

Despite previously asking questions about loading XML into a JS variable, I haven't found a satisfactory solution. In my script, I declare a variable before making an ajax request and then assign the result to that variable. However, this only seems t ...

javascriptjqueryxml

No action is triggered after submitting AJAX data in a WordPress environment

I'm currently working on developing a WordPress plugin that requires querying the database. However, I am facing challenges in getting it to function properly. Here is the code snippet that I have attempted: jQuery('#demo_ajax').submit(func ...

javascriptphpjqueryajaxwordpress

The event handler attached to the 'click' event will only be triggered upon the second click

After implementing the script, I noticed a strange behavior. When I click it on load, everything works perfectly. However, when I click it via a dynamically created element, the HTML seems to shift or stretch on the first click before returning to normal. ...

javascriptjqueryhtmliframe

Error: PHP syntax error occurred due to unexpected double-quote mark

As a beginner in php, I've been encountering an error in my code echo "<a href=\"PHadmin_deletePatient.php?id=<?php echo $row["PatientID"]; ?>\" class='delete' title='Delete' data-toggle= ...

phphtmlsyntax-error

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts