it-swarm.com.de

Wie lässt sich window.open modal öffnen?

Ich verwende derzeit window.showModalDilog, um ein modales Popup-Fenster zu öffnen, in dem das übergeordnete Fenster keine Aktion ausführen kann.

Aber bei der Google-Suche stellte ich fest, dass dies nicht die Standardmethode ist und verschiedene Browser diese Funktion nicht mehr unterstützen.

In der Tat bin ich mit diesem Problem in Opera konfrontiert. Opera gibt mir den Javascript-Fehler und stoppt die Ausführung an diesem Punkt. Nach diesem Fehler kann nichts mehr passieren.

Also habe ich nur noch eine Option und das ist window.open.

Ich möchte aber das übergeordnete Fenster deaktivieren (ebenfalls in showModalDilog).

Ich habe versucht, dies mit folgendem Code zu tun:

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

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

Aber das ist mir nicht gelungen.

Kann mir jemand den Code vorschlagen, damit ich window.open pop up Modal machen kann?

Hoffe, ich habe meine Frage gut erklärt. Bitte fragen Sie mich, wenn Sie weitere Informationen benötigen.

Danke im Voraus....

pdate:

Ich möchte eine URL im Popup-Fenster öffnen und dann eine bestimmte Aktion ausführen, nachdem die URL geöffnet wurde, einschließlich des Absendens eines Formulars.

Mein Code zum Öffnen eines Popups:

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

Bitte hilf mir....

pdate 1:

Es würde mir auch helfen, wenn ich beim Klicken auf mehrere Schaltflächen nur ein Popup-Fenster öffnen kann. Ich meine, wenn ich auf btn1 klicke, öffnet sich ein Popup mit dem Namen "temp". Aber wenn ich auf btn2 klicke, wird "temp" neu geladen, anstatt ein neues Popup zu öffnen. Wenn Sie mir dazu einen Vorschlag machen können, würde er mir auch helfen, das 80-prozentige Problem zu lösen.

8
Ashish Shah

Modales Fenster mit ExtJS-Ansatz.

Im Hauptfenster

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

In 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

Ich konnte das übergeordnete Fenster deaktivieren. Es hat jedoch nicht funktioniert, das Popup immer hoch zu halten. Der folgende Code funktioniert sogar für Frame-Tags. Fügen Sie dem Frame-Tag einfach die ID und die Klasseneigenschaft hinzu, und es funktioniert auch dort.

Im übergeordneten Fenster verwenden:

<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

Sie können window.open Nicht modalisieren, und ich empfehle Ihnen nachdrücklich, diesen Weg nicht zu gehen. Stattdessen können Sie so etwas wie Dialog-Widget von jQuery UI verwenden.

AKTUALISIEREN:

Sie können die load() -Methode verwenden:

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

Auf diese Weise wäre es schneller, aber das Markup wird in Ihrem Hauptdokument zusammengeführt, sodass alle Übermittlungen im Hauptfenster angewendet werden.

Und Sie können einen IFRAME verwenden:

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

Dies ist langsamer, wird aber unabhängig eingereicht.

4
Alireza