2011-04-14 110 views
20

Quiero abrir una ventana emergente y desactivar la ventana primaria. A continuación está el código que estoy usando;Javascript para abrir la ventana emergente y deshabilitar la ventana primaria

function popup() 
{ 

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

Por alguna razón, la ventana principal no se deshabilita. ¿Necesito algún código adicional O cuál es el caso?

Una vez más, estoy buscando algo similar a lo que obtenemos cuando usamos showModalDialog() .. i.e. que no permite seleccionar la ventana de los padres en lo all..Only es que quiero conseguir lo mismo usando window.open hecho

También por favor, sugieren el código que será multi-navegador compatible ..

+0

¿qué quiere decir con "disable the parent window"? – atlavis

+0

¿Qué quieres decir con desabled? –

+0

La desactivación significaría que no se permite al usuario seleccionar dicho texto en la ventana principal ... de hecho no le permite seleccionar nada en el elemento principal .. – testndtv

Respuesta

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

y luego declarar estas funciones en el cuerpo de la etiqueta de la ventana padre

<body onFocus="parent_disable();" onclick="parent_disable();"> 

Como solicitada aquí está el código HTML completo de la ventana padre

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

contenido de la nueva .jsp debajo de

<html> 
<body> 
I am child 
</body> 
</html> 
+0

Intenté esto en IE ... Pero me permite seleccionar o jugar con la ventana principal. – testndtv

+0

¿a qué te refieres con que puedes seleccionar ventana padre, porque para mí funciona bien? No te permitirá realizar ninguna acción en la ventana principal – anu

+0

Para mí, puedo realizar una acción en el padre mientras el hijo está abierto. .Puede copiar/pegar el código HTML complte que tiene. – testndtv

2

Para mi conocimiento, no puedes deshabilitar la ventana del navegador.

Lo que puede hacer es crear una ventana emergente jQuery (o un tipo similar) y cuando aparezca esta ventana emergente su navegador principal estará deshabilitado.

Abra su página secundaria en emergente.

+0

Conozco el diálogo modal jQuery ... Pero no puedo usar eso. .it es realmente un div dentro de la misma página ... – testndtv

+0

@hmthur - si no quieres que esté en la misma página, entonces puedes usar 'iframe' dentro de ese div y dar la página que quieres ver en el atributo' src' de 'iframe' – niksvp

1

El término clave es modal-dialog.

Como tal, no hay incorporado el diálogo modal ofrecido.

Pero puede usar muchas otras disponibles, p. this

1

¡Así es como finalmente lo hice! Puede colocar una capa (tamaño completo) sobre su cuerpo con alto índice Z y, por supuesto, oculto. Lo hará visible cuando la ventana esté abierta, lo enfocará al hacer clic sobre la ventana principal (la capa), y finalmente desaparecerá cuando se cierre o envíe la ventana abierta, o lo que sea.

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

y la capa en el cuerpo:

   <div class="layout" id="layout"></div> 

función que se abre la ventana emergente:

var new_window; 
    function winOpen(){ 
     $(".layer").show(); 
     new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200'); 
    } 

manteniendo nueva ventana enfocada:

  $(document).ready(function(){ 
      $(".layout").click(function(e) { 
       new_window.focus(); 
      } 
     }); 

y en el abierto ventana:

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

espero que ayudaría :-)

0

Hola la respuesta que @anu publicada es correcta, pero no lo puedo trabajar completamente como sea requerido.Al hacer un ligero cambio a child_open() la función funciona correctamente.

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