Creating a new pop-up window within a pre-existing pop-up window through the implementation of JavaScript

I am attempting to trigger a second pop-up from an initial pop-up using the code provided below. However, when I click on it, the first pop-up refreshes and displays the items within it instead of opening another separate pop-up window.

My goal is to have two pop-ups appear, but currently only one does. Can anyone provide assistance or guidance?

Here is the code snippet I am working with:

function pop_up(url) {
    newwindow = window.open(url,
        'name',
        'height=517,width=885,scrollbars=yes,toolbar=no,menubar=no,resizable=yes,location=no,directories=no,status=no,titlebar=no,left=400,top=120');
    if (window.focus) { newwindow.focus() }
    return false;
}

Below is the code for the click event trigger:

Page.ClientScript.RegisterStartupScript(GetType(), "popup",
    "pop_up_Info('" + "PopUpEmailing.aspx" + "');", true);
javascriptasp.netpopup

Answer №1

Found a similar query addressed here.

Remember to assign a different name for the window in the window.open function.

Answer №2

To enhance your pop-up control, you need to make some modifications:

function pop_up(url, windowName) {
    newwindow = window.open(url, 
        windowName,
        'height=517,width=885,scrollbars=yes,toolbar=no,menubar=no,resizable=yes,location=no,directories=no,status=no,titlebar=no,left=400,top=120');
    if (window.focus) { newwindow.focus() }
    return false;
}

After making the necessary changes, in your registered call, add the following code:

 Page.ClientScript.RegisterStartupScript(GetType(),
     "popup", "pop_up('PopUpEmailing.aspx', 'DifferentPopupName');", true);

Ensure that the second parameter has a unique name compared to the original popup window.

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

Tips for generating a server error during the retrieval of JS files

I'm a beginner in JavaScript and I've been given a task to send an email input from a form to a node server. Everything is working correctly, but there's one requirement I need to implement: Whenever the entered email is [email protec ...

javascriptnode.jsserverfetch

When the CSS animation has finished in JavaScript

I am currently developing a game using HTML/JavaScript, and I have implemented a "special ability" that can only be activated once every x seconds. To indicate when this ability is available for use, I have created a graphical user interface element. Since ...

javascripthtmlcsscss-animations

Differences in behavior across operating systems when pasting content copied from Excel into Next.js

Exploring the Issue I am currently working on a project using Next.js 14 where users can paste data copied from an Excel file into a spreadsheet-like component called react-data-grid. However, I have encountered some inconsistencies when copy-pasting on M ...

javascriptexcelwindowsmacosnext.js

Tips on obtaining outcome by invoking a route outside of app.js

Within my file containing the request methods, the structure appears as follows: article.js router .route("/") .all((req, res) => { console.log("this should happen for any call to the article route"); }) .get((req, res) = ...

javascriptnode.jsexpressroutes

Retrieve a form (for verification purposes) from a separate AngularJS component

I'm facing an issue with accessing a form from one component to another in my project. One component contains a form, and the other has navigation buttons that, when clicked, should validate the form before moving on to the next step. However, I alway ...

javascriptangularjsangularjs-ng-form

Integrate Chrome extension using code

Is there a way to programmatically load a Chrome extension? Can it be done using web driver with external extension preferences, or perhaps through JavaScript or another scripting language? ...

javascriptgoogle-chrome-extensionselenium-webdriver

Does the react-google-login library utilize the services provided by Google Identity?

Currently incorporating the react-google-login library (https://www.npmjs.com/package/react-google-login/v/5.2.2) in my JavaScript codebase to grant users access to my website. Can anyone confirm whether this library utilizes "Google Identity Services" or ...

javascriptreactjsgoogle-signin

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

javascripthtmlnode.jsangular

Chrome Automatically Playing WebRTC Audio

My webapp has webrtc functionality, but I've noticed a strange issue. When connections are established between Chrome browsers, the audio is not played, while video is. However, this problem doesn't occur with Mozilla users. So... Chrome user 1 ...

javascripthtmlgoogle-chromewebrtc

Wait for all asynchronous functions in Node.js to finish before proceeding with the remaining code

I am facing an issue in my code where I have 2 for loops executing the same async function, but I need the code to wait until both loops finish executing before proceeding. Here is a snippet of my code: for(var a = 0; a < videoIds.length; a++){ ...

javascriptnode.jsmongodbasynchronousmongoose

The react component is not defined within the <Popup></Popup> tag

SOLVED: Big thanks to everyone who offered their assistance. Upon further investigation, I discovered that in the library I was using, the trigger={} functionality is specifically designed to work only with a button element. To address this issue, I took ...

javascriptreactjs

Executing a method in an applet using JavaScript

I am trying to print some information using an applet. The applet is located in the signed qds-client.jar file and has the following code: public class PrintText extends Applet implements Printable { private ClientAccount clientAccount; public Client ...

javascriptjavaapplet

Guide to recreating the Material Ripple effect using Vuejs

I am in the process of recreating the ripple effect inspired by Material Design for my current project. I have decided to move away from Quasar and build all the elements from scratch. Here is the effect: https://i.sstatic.net/VKJIc.gif I have seen some ...

javascriptvue.jssassmaterial-designvue-transitions

Is it possible to dynamically change the port for an Express server?

Here is a common question that often arises among beginners, as I had the same query when I first started Is there a way to set the port for express without manually coding it or selecting a port yourself? This was something that puzzled me during my init ...

javascriptnode.jsexpress

Obscure Promise Structure - Accomplish, Flop, Achieved

I came across the following code block and I'm struggling to understand it. While I have a good grasp on promises in the context of: deferred.then(successCb, errorCb); This code snippet appears to have three callbacks (complete, fail, done>) whic ...

javascriptjquerypromise

Utilizing Vue.js to compare two arrays and verify if the results are identical

I am in the process of developing a theater app that requires me to work with JSON data consisting of two arrays: Sections and Groups. While I have successfully loaded both arrays into my Vue app, I now need to compare them to find matches. The first array ...

javascriptjsonvue.js

Extract data from a JSON file and refine an array

Currently, I am working with reactjs and have an array stored in a json file. My current task involves filtering this array using the selectYear function. However, when attempting to filter the data using date.filter, I encounter the following error: An ...

javascriptjsonreactjs

Validation scheme for the <speak> element

When using validators in an angular formarray for input fields, I encountered a challenge with the regex to check the <speak> tag. https://i.sstatic.net/ogFA3.png The content provided was considered valid. https://i.sstatic.net/ar5FJ.png An error ...

javascriptangularregex

Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...

javascriptjquerycss

Innovative idea for a time management system based on timelines and scheduling

My latest project involves creating a scrollable scheduler, inspired by vis-timeline and built using Vue.js. One of the main challenges I'm facing is achieving smooth infinite scrolling in all directions (past and future). I must confess that I&apo ...

javascriptvue.jsscrollschedulerconceptual