web-dev-qa-db-fra.com

comment faire pop-up window.open Modal?

J'utilise actuellement window.showModalDilog pour ouvrir une fenêtre contextuelle modale qui ne permet pas à la fenêtre parente de faire une action.

Mais dans la recherche Google, j'ai trouvé que ce n'était pas la méthode standard et divers navigateurs ont cessé de prendre en charge cette fonction.

En fait, je suis confronté à ce problème dans Opera. Opera me donne l'erreur javascript et arrête l'exécution à ce stade. Rien ne peut se produire après cette erreur.

Donc, je n'ai qu'une seule option et c'est window.open.

Mais je veux désactiver la fenêtre parent (également dans showModalDilog).

J'ai essayé le code ci-dessous pour le faire:

<script type="text/javascript">
            $(window).load(function() {
                window.opener.document.body.disabled=true;
            });

            $(window).unload(function() {
                window.opener.document.body.disabled=false;
            });
</script>

Mais j'ai échoué.

Quelqu'un peut-il me suggérer le code afin que je puisse faire apparaître window.open Modal?

J'espère avoir bien expliqué ma question. Veuillez me demander si vous avez besoin de plus d'informations.

Merci d'avance....

Mise à jour:

Je souhaite ouvrir une URL dans la fenêtre contextuelle, puis effectuer certaines actions après l'ouverture de l'URL, y compris la soumission d'un formulaire.

Mon code pour ouvrir une pop up:

window.open("https://www.picpixa.com/wp-content/plugins/create-own-object/plugin-google-drive/index.php", "socialPopupWindow",
                "location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable = no");

Aidez-moi, s'il vous plaît....

Mise à jour 1:

Cela m'aiderait également si je ne pouvais ouvrir qu'une seule fenêtre contextuelle en cliquant sur plusieurs boutons. Je veux dire que si je clique sur btn1, une fenêtre contextuelle nommée "temp" s'ouvre. Mais lorsque je clique sur btn2, au lieu d'ouvrir un nouveau pop-up, "temp" se rechargera. Si vous pouvez me donner des suggestions à ce sujet, cela m'aiderait également à résoudre un problème à 80%.

javascriptjquerypopuppopupwindow
8
Ashish Shah

Fenêtre modale utilisant l'approche ExtJS.

Dans la fenêtre principale

<html>
<link rel="stylesheet" href="ext.css" type="text/css">
<head>    
<script type="text/javascript" src="ext-all.js"></script>

function openModalDialog() {
    Ext.onReady(function() {
        Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: Ext.getBody().getViewSize().height*0.8,
        width: Ext.getBody().getViewSize().width*0.8,
        minWidth:'730',
        minHeight:'450',
        layout: 'fit',
        itemId : 'popUpWin',        
        modal:true,
        shadow:false,
        resizable:true,
        constrainHeader:true,
        items: [{
            xtype: 'box',
            autoEl: {
                     tag: 'iframe',
                     src: '2.html',
                     frameBorder:'0'
            }
        }]
        }).show();
  });
}
function closeExtWin(isSubmit) {
     Ext.ComponentQuery.query('#popUpWin')[0].close();
     if (isSubmit) {
          document.forms[0].userAction.value = "refresh";
          document.forms[0].submit();
    }
}
</head>
<body>
   <form action="abc.jsp">
   <a href="javascript:openModalDialog()"> Click to open dialog </a>
   </form>
</body>
</html>

Dans popupWindow 2.html

<html>
<head>
<script type="text\javascript">
function doSubmit(action) {
     if (action == 'save') {
         window.parent.closeExtWin(true);
     } else {
         window.parent.closeExtWin(false);
     }   
}
</script>
</head>
<body>
    <a href="javascript:doSubmit('save');" title="Save">Save</a>
    <a href="javascript:doSubmit('cancel');" title="Cancel">Cancel</a>
</body>
</html>
2
Pavithra Kudethur

J'ai pu désactiver la fenêtre parent. Cependant, faire en sorte que le pop-up reste toujours levé n'a pas fonctionné. Le code ci-dessous fonctionne même pour les balises de cadre. Ajoutez simplement la propriété id et class à la balise frame et cela fonctionne bien là aussi.

Dans la fenêtre parent, utilisez:

<head>    
<style>
.disableWin{
     pointer-events: none;
}
</style>
<script type="text/javascript">
    function openPopUp(url) {
      disableParentWin(); 
      var win = window.open(url);
      win.focus();
      checkPopUpClosed(win);
    }
    /*Function to detect pop up is closed and take action to enable parent window*/
   function checkPopUpClosed(win) {
         var timer = setInterval(function() {
              if(win.closed) {
                  clearInterval(timer);                  
                  enableParentWin();
              }
          }, 1000);
     }
     /*Function to enable parent window*/ 
     function enableParentWin() {
          window.document.getElementById('mainDiv').class="";
     }
     /*Function to enable parent window*/ 
     function disableParentWin() {
          window.document.getElementById('mainDiv').class="disableWin";
     }

</script>
</head>

<body>
<div id="mainDiv class="">
</div>
</body>
5
Pavithra Kudethur

Vous ne pouvez pas rendre window.open Modal et je vous recommande fortement de ne pas suivre cette voie. Au lieu de cela, vous pouvez utiliser quelque chose comme widget de dialogue de jQuery UI .

MISE À JOUR:

Vous pouvez utiliser la méthode load():

$("#dialog").load("resource.php").dialog({options});

De cette façon, ce serait plus rapide, mais le balisage fusionnera dans votre document principal de sorte que toute soumission sera appliquée dans la fenêtre principale.

Et vous pouvez utiliser un IFRAME:

$("#dialog").append($("<iframe></iframe>").attr("src", "resource.php")).dialog({options});

Ceci est plus lent, mais sera soumis indépendamment.

4
Alireza