admin管理员组

文章数量:1406949

This is a JavaScript question.

I need to create a button which, when clicked once, will open up 5 sub-windows (popup boxes).

One box will be in the top left corner of the screen, one in the top right corner, one in the lower left corner, one in the lower right corner, and one in the center. Each box will have a different URL.

When the main window is closed, all of the sub-windows should also close.

I have only been able to do the code that opens one popup - cannot figure out how to code all 5 to open at once with one button click and then close them all when the parent window closes.

Here is what I have so far:

<SCRIPT language="JavaScript">
function myPopup(URL) {
popupWindow = window.open(URL,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</SCRIPT>

<a href="#" onclick="myPopup(this.href);return false">Open Pop-Up</a>

Many thanks to anyone who can help me out.

Thanks to everyone who is helping me. By utilizing the feedback here, I have worked on this project all day and have e up with some code that works. I was not sure how to assign urls for each popup to the array - but at least they work.

However, I can not get all the popups to close when the parent window closes. Hope you can help. Here is the new code:

<script type="text/javascript">

/*Use Array - Open 5 new popup windows using onclick*/

function newWindow() {
 var winPop = new Array();
  winPop[winPop.length] = window.open('top_right.html','window1','scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200');
window.open('top_left.html','window2','scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200');
window.open('bottom_left.html','window3','scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600');
window.open('bottom_right.html','window4','scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600');
window.open('center_page.html','window5','scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450');
}

/*NOT WORKING FOR ME --Close all popups when parent window is closed*/

onbeforeunload = function() {
    for (var index = 0; index < winPop.length; ++index)
        winPop[index].close();
}
</script>
</head>

<body>
<div id="wrap"> <a href='' onclick='newWindow()'><img src='images/group_clicker.gif' border='0'></a> </div>
</body>

This is a JavaScript question.

I need to create a button which, when clicked once, will open up 5 sub-windows (popup boxes).

One box will be in the top left corner of the screen, one in the top right corner, one in the lower left corner, one in the lower right corner, and one in the center. Each box will have a different URL.

When the main window is closed, all of the sub-windows should also close.

I have only been able to do the code that opens one popup - cannot figure out how to code all 5 to open at once with one button click and then close them all when the parent window closes.

Here is what I have so far:

<SCRIPT language="JavaScript">
function myPopup(URL) {
popupWindow = window.open(URL,'popUpWindow','height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
</SCRIPT>

<a href="#" onclick="myPopup(this.href);return false">Open Pop-Up</a>

Many thanks to anyone who can help me out.

Thanks to everyone who is helping me. By utilizing the feedback here, I have worked on this project all day and have e up with some code that works. I was not sure how to assign urls for each popup to the array - but at least they work.

However, I can not get all the popups to close when the parent window closes. Hope you can help. Here is the new code:

<script type="text/javascript">

/*Use Array - Open 5 new popup windows using onclick*/

function newWindow() {
 var winPop = new Array();
  winPop[winPop.length] = window.open('top_right.html','window1','scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200');
window.open('top_left.html','window2','scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200');
window.open('bottom_left.html','window3','scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600');
window.open('bottom_right.html','window4','scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600');
window.open('center_page.html','window5','scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450');
}

/*NOT WORKING FOR ME --Close all popups when parent window is closed*/

onbeforeunload = function() {
    for (var index = 0; index < winPop.length; ++index)
        winPop[index].close();
}
</script>
</head>

<body>
<div id="wrap"> <a href='' onclick='newWindow()'><img src='images/group_clicker.gif' border='0'></a> </div>
</body>
  • javascript
Share Improve this question edited Jul 28, 2013 at 1:21 user2624788 asked Jul 27, 2013 at 3:36 user2624788user2624788 331 gold badge1 silver badge4 bronze badges 1
  • 1 Hint: if calling window.open() once opens one window, what would calling window.open() five times do? (Assuming the browser's popup-blocking settings don't put the kibosh on the whole thing.) – nnnnnn Commented Jul 27, 2013 at 3:46
Add a ment  | 

3 Answers 3

Reset to default 1

DEMO

Save all opened windows to an array.
Register for the beforeUnload event, and when it fires, loop through the popups close()'ing them.

NB: I think it's jsFiddle or Chrome, but it won't open more than 1 popup per click.

And due to restrictions placed on popup opening you cannot reliably control the position of opened popups. It may be useful for you to open in-window popups like YUI's panel or jQuery(UI)'s dialogue

function openPopup(howMany) {
    var popups = [];

    var temp;
    for (var index = 0; index < howMany; ++index) {
        popups.push(open('', '', 'height=500,width=500'));
        popups[index].document.write('popup ' + (index + 1) + ' of ' + howMany + '<br/>this will close on parent window close');
    }

    closeFunc = function() {
        for (var index = 0; index < popups.length; ++index)
            popups[index].close();
    };

    if (addEventListener)
        addEventListener('beforeunload', closeFunc, false);
    else
        attachEvent('onbeforeunload', closeFunc);
}

You could use a for loop to open multiple windows. Be sure to give a unique name to popup window

function myPopup(URL) {
    for (var i = 0; i < 5; i++) {
        var popupWindow = window.open(URL, i, 'height=500,width=500,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
    }
}

An answer to your edit:

You wrote

function newWindow() {
 var winPop = new Array();
  winPop[winPop.length] = window.open('top_right.html','window1','scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200');
window.open('top_left.html','window2','scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200');
window.open('bottom_left.html','window3','scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600');
window.open('bottom_right.html','window4','scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600');
window.open('center_page.html','window5','scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450');
}

What you need is

var winPop;

function newWindow() {
    winPop = [
        open(
            'top_right.html',
            'window1',
            'scrollbars=no,width=235,height=155,left=1000,top=200,screenX=1000,screenY=200'
        ),
        open(
            'top_left.html',
            'window2',
            'scrollbars=no,width=235,height=155,left=325,top=200,screenX=325,screenY=200'
        ),
        open(
            'bottom_left.html',
            'window3',
            'scrollbars=no,width=235,height=155,left=325,top=600,screenX=325,screenY=600'
        ),
        open(
            'bottom_right.html',
            'window4',
            'scrollbars=no,width=235,height=155,left=1000,top=600,screenX=1000,screenY=600'
        ),
        open(
            'center_page.html',
            'window5',
            'scrollbars=no,width=235,height=155,left=660,top=450,screenX=660,screenY=450'
        )
    ];
}

This is a scoping issue (as well as you not actually adding the windows to the array :|), winPop needs to be global, I.e. vard outside of the function.

本文标签： Open multiple javascript popup boxes with one button clickStack Overflow

版权声明：本文标题：Open multiple javascript popup boxes with one button click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744921304a2632309.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。