window.open 팝업 방법 모달?

현재 window.showModalDilog를 사용하여 부모 창에서 어떤 작업을 수행 할 수없는 모달 팝업 창을 엽니 다.window.open 팝업 방법 모달?

하지만 Google 검색에서 표준 방법이 아니며 다양한 브라우저가이 기능을 지원하는 것을 중단했습니다.

사실 나는 Opera에서이 문제에 직면하고 있습니다. 오페라 날 자바 스크립트 오류를 제공하고 그 시점에서 실행을 중지합니다. 오류가 발생한 후에는 아무 것도 일어나지 않습니다.

그래서 하나의 옵션 만 남았고 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 :

내가 하나를 열 수 있다면 그것은 또한 나에게 도움이 될 것이다 여러 버튼을 클릭하면 팝업 창이 열립니다. 나는 btn1 팝업을 클릭하면 "temp"라는 팝업이 열립니다. 하지만 btn2를 클릭하면 "temp"라는 새 팝업창이 열립니다. 이 문제에 대한 제안을하면 80 % 문제를 해결하는 데 도움이됩니다.

출처

2014-07-17 Ashish Shah

@Teemu() 현재 ... 는하지만 오페라에서 지원되지 않습니다. 그것이 대체물을 찾는 이유입니다 ... –

음, sMD는 여전히 [표준의 일부인 것 같습니다] (http://www.w3.org/TR/2013/WD-html51-20130528/webappapis.html) # dialogs-implemented-using-separate-documents). 그것을 사용할 수 없다면 UI 대화 상자 또는 비슷한 것을 사용하여 직접 구현해야합니다. – Teemu

모달 창. popupWindow의 2.html에서

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

주 창에서

내가하여 showModalDialog를 사용하고

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

출처

2014-11-27 04:57:50

window.open을 모달로 만들 수 없으므로 그렇게하지 않는 것이 좋습니다. 대신 jQuery UI's dialog widget과 같은 것을 사용할 수 있습니다.

UPDATE : 그래서 어떤 메인 창에 적용됩니다 제출이 빠른 것

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

이 방법하지만 마크 업이 주 문서에 병합합니다 :

당신은 load() 방법을 사용할 수 있습니다.

그리고 당신은 IFRAME 사용할 수 있습니다

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

이 느리지 만 독립적으로 제출됩니다.

출처

2014-07-17 10:35:54 Alireza

그것이 도움이 될 것 같지 않습니다. URL을 열고 양식을 제출하는 등의 작업을 수행하려고합니다. 내 질문을 업데이트하고 내 window.open 코드 붙여 넣기 ... –

당신은 쉽게 'load()'메소드를 사용할 수 있습니다 또는'DIV' 안에서'IFRAME'을 사용하기를 원한다면 말입니다. 답변을 업데이트해야합니까? – Alireza

load()를 사용하고 있습니다 ... 예 ... 당신의 ans을 업데이트 할 수 있습니다 ... :) 가능한 경우 코드 사용 ... –

부모 창을 사용 중지 할 수있었습니다. 그러나 팝업을 항상 올리는 것은 효과가 없었습니다. 아래 코드는 프레임 태그에도 적용됩니다. 프레임 태그에 id와 class 속성을 추가하면 잘 작동합니다. 부모 창 사용에

: ExtJS로 접근법을 사용

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

출처

2014-10-14 09:13:10

@ alireza의 대답은 정확했지만이 질문에 대한 매우 훌륭하고 적합한 대답입니다. –

@AshishShah ExtJS를 사용하여 최신 접근 방식을 확인하십시오. 심지어 크롬 37 버전으로 showModalDialog 문제를 해결하는 방법을 찾지 못했습니다. 사용자가 부모 창을 클릭하면 최소화되는 팝업 창에 대해 타협 할 수 없었기 때문입니다. 이것은 내가 길을 찾기 위해 더 많은 노력을 기울이고 ExtJS가 이것을위한 최상의 해결책이라고 느꼈습니다. ExtJS 방식을 사용하여 최신 게시물을 확인하십시오. 이렇게하면 팝업 창이 항상 열리 며 showModalDialog에서 사용하는 거의 모든 작업을 수행 할 수 있습니다. –

window.open 팝업 방법 모달?

답변

관련 문제