web-dev-qa-db-fra.com

Javascript pour ouvrir la fenêtre popup et désactiver la fenêtre parent

Je veux ouvrir une fenêtre contextuelle et désactiver la fenêtre parente. Vous trouverez ci-dessous le code que j'utilise.

function popup()
{

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

Pour une raison quelconque, la fenêtre parent n'est pas désactivée. Ai-je besoin d'un code supplémentaire OR quel est le cas?

Encore une fois, je recherche quelque chose de similaire à ce que nous obtenons lorsque nous utilisons showModalDialog () .. c’est-à-dire. cela ne permet pas de sélectionner la fenêtre parente du tout. Seule chose est que je veux obtenir la même chose en utilisant window.open

Veuillez également suggérer le code compatible avec tous les navigateurs.

21
testndtv
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();
}

puis déclarer ces fonctions dans la balise body de la fenêtre parente

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

Comme vous l'avez demandé, voici le code HTML complet de la fenêtre parente

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

Contenu de new.jsp ci-dessous

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

À ma connaissance, vous ne pouvez pas désactiver la fenêtre du navigateur.

Ce que vous pouvez faire est de créer un popup { jQuery } _ (ou similaire) et quand ce popup apparaît, votre navigateur parent sera désactivé. 

Ouvrez votre page enfant en popup.

2
niksvp

Le terme clé est modal-dialog. 

En tant que tel, aucun dialogue modal intégré n'est proposé.

Mais vous pouvez utiliser beaucoup d’autres disponibles, par exemple. ce

1
Jatin Dhoot

C'est comme ça que je l'ai finalement fait! Vous pouvez mettre une couche (en taille réelle) sur votre corps avec un indice z élevé et, bien sûr, masquée. Vous allez la rendre visible lorsque la fenêtre est ouverte, la rendre centrée sur le clic sur la fenêtre parente (la couche) et enfin la faire disparaître lorsque la fenêtre ouverte est fermée ou soumise, ou autre chose.

      .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;
  }

et couche dans le corps:

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

fonction qui ouvre la fenêtre popup:

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

en gardant la nouvelle fenêtre au point:

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

et dans la fenêtre ouverte:

    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";
   }

J'espère que ça aiderait :-)

1
MehdiK

Bonjour, la réponse que @anu a affichée est correcte, mais elle ne fonctionnera pas complètement si nécessaire. En modifiant légèrement la fonction child_open () elle fonctionne correctement.

<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>
0
Sachin J