web-dev-qa-db-ja.com

window.openポップアップモーダルを作成する方法？

私は現在window.showModalDilogを使用して、モーダルポップアップウィンドウを開きますが、これは親ウィンドウにアクションを許可していません。

しかし、Google検索では、これが標準的な方法ではなく、さまざまなブラウザーがこの機能のサポートを停止していることがわかりました。

実際、私はOperaでこの問題に直面しています。 Operaはjavascriptエラーを表示し、その時点で実行を停止します。そのエラーの後には何も起こりません。

そのため、オプションは1つしかなく、それはwindow.openです。

しかし、親ウィンドウを無効にしたい（同様にshowModalDilogで）。

私はそうするために以下のコードを試しました：

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

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

しかし、私はこれに失敗しました。

Window.openポップアップモーダルを作成できるように、誰かが私にコードを提案できますか？

私の質問をうまく説明できたと思います。さらに情報が必要な場合はお問い合わせください。

前もって感謝します....

更新：

ポップアップウィンドウでURLを開き、URLを開いた後、フォームの送信などの特定のアクションを実行します。

ポップアップを開くための私のコード：

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

私を助けてください....

更新1：

また、複数のボタンをクリックしてポップアップウィンドウを1つだけ開くことができれば助かります。つまり、「temp」という名前のポップアップbtn1をクリックすると開きます。しかし、btn2をクリックすると、新しいポップアップを開く代わりに「temp」がリロードされます。これに関する提案をいただければ、80％の問題を解決するのにも役立ちます。

javascriptjquerypopuppopupwindow
8
Ashish Shah

ExtJSアプローチを使用したモーダルウィンドウ。

メインウィンドウで

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

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

親ウィンドウを無効にすることができました。ただし、ポップアップを常に上げたままにすることは機能しませんでした。以下のコードは、フレームタグに対しても機能します。 idとclassプロパティをframeタグに追加するだけで、そこでも機能します。

親ウィンドウで使用：

<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

_window.open_をモーダルにすることはできません。そのようにしないことを強くお勧めします。代わりに jQuery UIのダイアログウィジェット のようなものを使用できます。

更新：

load()メソッドを使用できます：

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

この方法では高速になりますが、マークアップはメインドキュメントにマージされるため、送信はメインウィンドウに適用されます。

また、IFRAMEを使用できます。

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

これは遅くなりますが、個別に送信します。

4
Alireza