2013-07-27 2 views
3

Это вопрос 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> 
+1

Подсказка: если вызывать 'window.open()' _once_ открывает окно _one_, что бы вызывать 'window.open()' _five times_ do? (Предполагая, что всплывающие блокировки браузера не устанавливают кибош в целом.) – nnnnnn

ответ

1

DEMO

Сохранить все открытые окна в массив.
Зарегистрируйся за событие beforeUnload, и когда он выстрелил, просмотрите всплывающие окна close().

NB: Я думаю, что это jsFiddle или Chrome, но он не откроет более 1 всплывающего окна за клик.

И из-за ограничений, установленных при открытии всплывающих окон, вы не можете надежно управлять положением открытых всплывающих окон. Это может быть полезно для вас, чтобы открыть в-окне всплывающих окон, как YUI 's panel или 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); 
} 
+0

Привет, большое спасибо! Я пытаюсь применить этот массив к моему проекту, но у меня проблемы с закрытием всех всплывающих окон в закрытии родительского окна. Mu текущий код размещен в оригинальном вопросе. – user2624788

+0

Ваш фактически не добавляет ни одного из них в массив. Используйте array.push() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push – Hashbrown

+0

не забывайте, если ответ вам поможет, сообщите другим (нажав стрелку вверх рядом с ней), даже если он не отвечает на ваш вопрос (для чего нужен тик).
Также см. Мой другой ответ, чтобы исправить то, что вы изменили в своем вопросе. Должен работать тогда – Hashbrown

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'); 
    } 
} 
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, I.e. var d наружу функции.

+0

Привет, Хашбрун, спасибо за то, что вы наклеились на меня. Я вижу, что вы имеете в виду, используя глобальную переменную, и теперь я использовал исправленный код в своем сценарии. Ваша демонстрация работает отлично, но, к сожалению, я пробовал все утро, чтобы объединить мои URL-адреса и сопровождающие атрибуты с демо-кодом и в значительной степени нарушил это. Кажется, что я должен вставлять URL-адреса и т. Д. После: popups.push (open ('', но это не работает. Можете ли вы показать мне, где я буду размещать этот код? Также я ценю подсказку о повышении. здесь и не знал об этом. – user2624788

Смежные вопросы