Javascript для открытия всплывающего окна и отключения родительского окна

Я хочу открыть всплывающее окно и отключить родительское окно. Ниже приведен код, который я использую;

function popup()
{

    popupWindow = window.open('child_page.html','name','width=200,height=200');
    popupWindow.focus();
}

По какой-то причине родительское окно не отключается. Нужен ли мне какой-то дополнительный код? В чем дело?

Опять же, я ищу что-то похожее на то, что мы получаем, когда мы используем showModalDialog().. i.e. он не позволяет полностью выбрать родительское окно.. Только я хочу получить то же самое, что и с помощью window.open

Также предложите код, который будет совместим с кросс-браузером.

Ответ 1

var popupWindow=null;

function popup()
{
    popupWindow = window.open('child_page.html','name','width=200,height=200');
}

function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}

а затем объявить эти функции в теге body родительского окна

<body onFocus="parent_disable();" onclick="parent_disable();">

Как вы запросили здесь полный html-код родительского окна

<html>
<head>
<script type="text/javascript">

var popupWindow=null;

function child_open()
{ 

popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");

}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
    <a href="javascript:child_open()">Click me</a>
</body>    
</html>

Содержание new.jsp ниже

<html>
<body>
I am child
</body>
</html>

Ответ 2

Насколько я знаю, вы не можете отключить окно браузера.

Что вы можете сделать, это создать jQuery (или подобное) всплывающее окно, и когда это всплывающее окно появится, ваш родительский браузер будет отключен.

Откройте свою дочернюю страницу во всплывающем окне.

Ответ 3

Ключевым термином является модальный диалог.

Как таковой нет встроенного модального диалога.

Но вы можете использовать многие другие доступные, например. this

Ответ 4

Вот как я, наконец, это сделал! Вы можете поместить слой (полный размер) над своим телом с высоким индексом z и, конечно, скрытым. Вы откроете его, когда откроется окно, сделайте его сфокусированным на щелчке над родительским окном (слоем) и, наконец, исчезнет, когда открытое окно будет закрыто или отправлено или что-то еще.

      .layer
  {
        position: fixed;
        opacity: 0.7;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 999999;
        background-color: #BEBEBE;
        display: none;
        cursor: not-allowed;
  }

и слой в теле:

                <div class="layout" id="layout"></div>

которая открывает всплывающее окно:

    var new_window;
    function winOpen(){
        $(".layer").show();
        new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200');
    }

сохранение фокуса в новом окне:

         $(document).ready(function(){
             $(".layout").click(function(e) {
                new_window.focus();
            }
        });

и в открывшемся окне:

    function submit(){
        var doc = window.opener.document,
        doc.getElementById("layer").style.display="none";
         window.close();
    }   

   window.onbeforeunload = function(){
        var doc = window.opener.document;
        doc.getElementById("layout").style.display="none";
   }

Надеюсь, это поможет: -)

Ответ 5

Привет, ответ, который опубликован @anu, но он не будет полностью работать по мере необходимости. Сделав небольшое изменение функции child_open(), он работает правильно.

<html>
<head>
<script type="text/javascript">

var popupWindow=null;

function child_open()
{ 
if(popupWindow && !popupWindow.closed)
   popupWindow.focus();
else
   popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");

}
function parent_disable() {
  if(popupWindow && !popupWindow.closed)
    popupWindow.focus();
}
</script>
</head>
  <body onFocus="parent_disable();" onclick="parent_disable();">
     <a href="javascript:child_open()">Click me</a>
  </body>    
</html>