单击一个按钮打开多个javascript弹出框

时间:2013-07-27 03:36:48

标签: javascript

这是一个JavaScript问题。

我需要创建一个按钮,当点击一次时,会打开5个子窗口(弹出框)。

一个框将位于屏幕的左上角,一个位于右上角,一个位于左下角,一个位于右下角,一个位于中心。每个框都有不同的URL。

当主窗口关闭时,所有子窗口也应该关闭。

我只能做打开一个弹出窗口的代码 - 无法弄清楚如何通过单击一个按钮一次编码所有5来打开,然后在父窗口关闭时关闭它们。

这是我到目前为止所做的:

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

非常感谢能帮助我的人。


感谢所有帮助我的人。通过利用这里的反馈,我整天都在研究这个项目,并提出了一些有效的代码。我不确定如何为每个弹出窗口分配URL到阵列 - 但至少它们可以工作。

但是,当父窗口关闭时,我无法关闭所有弹出窗口。希望你能帮忙。这是新代码:

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

3 个答案:

答案 0 :(得分:1)

<强> DEMO

将所有打开的窗口保存到阵列 注册beforeUnload事件,当它触发时,循环显示close()&#39}的弹出窗口。

注意:我认为它是jsFiddle或Chrome,但每次点击不会打开超过1个弹出窗口。

由于弹出窗口的限制,您无法可靠地控制打开的弹出窗口的位置。您可能需要打开YUI paneljQuery(UI) 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);
}

答案 1 :(得分:0)

您可以使用for循环打开多个窗口。务必为弹出窗口提供一个唯一的名称

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

答案 2 :(得分:0)

您的编辑答案:

你写了

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

您需要的是

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'
        )
    ];
}

这是一个范围问题(以及你实际上没有将窗口添加到数组中:|),winPop需要是global,即。 var d在函数之外。