web-dev-qa-db-ja.com

ポップアップウィンドウを開いて親ウィンドウを無効にするJavascript

ポップアップウィンドウを開き、親ウィンドウを無効にします。以下は私が使用しているコードです。

function popup()
{

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

何らかの理由で、親ウィンドウは無効になりません。追加のコードが必要ですかORどうしますか？

繰り返しになりますが、showModalDialog（）.. i.eを使用した場合に得られるものに似たものを探しています。親ウィンドウを選択することはまったくできません。唯一のものは、window.openを使用して同じことをしたいだけです

また、クロスブラウザ互換のコードを提案してください。

javascriptpopup
22
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();
}

そして、これらの関数を親ウィンドウの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>
31
anu

私の知る限り、ブラウザウィンドウを無効にすることはできません。

できることは、 jQuery （または同様の種類の）ポップアップを作成することです。このポップアップが表示されると、親ブラウザーが無効になります。

ポップアップで子ページを開きます。

2
niksvp

重要な用語はmodal-dialogです。

そのため、組み込みのモーダルダイアログは提供されていません。

しかし、利用可能な他の多くを使用することができます。 this

1
Jatin Dhoot

これが私がついにやった方法です！高いz-indexを使用して、もちろん非表示のレイヤー（フルサイズ）を体の上に置くことができます。ウィンドウが開いているときに表示し、親ウィンドウ（レイヤー）上のクリックに焦点を合わせ、開いたウィンドウが閉じられたり送信されたりすると、最終的に消えます。

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

私はそれが役立つことを願っています:-)

1
MehdiK

こんにちは、@ anuが投稿した答えは正しいですが、必要に応じて完全には機能しません。 child_open（）functionにわずかな変更を加えることにより、適切に機能します。

<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