Window.open como modal popup?

Question

Quiero abrir window.open como ventana emergente modal.

var features = 'resizable= yes; status= no; scroll= no; help= no; center= yes; 
width=460;height=140;menubar=no;directories=no;location=no;modal=yes'; 
    window.open(href, 'name', features, false); 

puedo usar Window.ShowModelDialog(), pero en mi ventana secundaria que estoy llamando a los padres javascript método. Eso no está sucediendo con ShowModelDialog().

function CallParentScript(weburl) { 
     alert(weburl); 
     if (weburl != null) { 
      var url = weburl; 

      window.opener.SelectUserImageCallback(url); 
      window.close(); 
      return false; 
     } 
    } 

Si uso window.open(). Puedo llamar a Parent javascript. Pero la ventana no es modal.

¿Cómo resolver esto? ¿Puedo escribir algo en la ventana emergente para niños siempre arriba?

Answer 1

Un pop-up es un hijo de la ventana padre, pero no es un hijo del documento de nivel superior. Es su propia ventana de navegador independiente y no está contenida por el padre.

Use una DIV completamente posicionada y una superposición translúcida en su lugar.

EDITAR - ejemplo

Es necesario jQuery para esto:

<style> 
html, body { 
    height:100% 
} 


#overlay { 
    position:absolute; 
    z-index:10; 
    width:100%; 
    height:100%; 
    top:0; 
    left:0; 
    background-color:#f00; 
    filter:alpha(opacity=10); 
    -moz-opacity:0.1; 
    opacity:0.1; 
    cursor:pointer; 

} 

.dialog { 
    position:absolute; 
    border:2px solid #3366CC; 
    width:250px; 
    height:120px; 
    background-color:#ffffff; 
    z-index:12; 
} 

</style> 
<script type="text/javascript"> 
$(document).ready(function() { init() }) 

function init() { 
    $('#overlay').click(function() { closeDialog(); }) 
} 

function openDialog(element) { 
    //this is the general dialog handler. 
    //pass the element name and this will copy 
    //the contents of the element to the dialog box 

    $('#overlay').css('height', $(document.body).height() + 'px') 
    $('#overlay').show() 
    $('#dialog').html($(element).html()) 
    centerMe('#dialog') 
    $('#dialog').show(); 
} 

function closeDialog() { 
    $('#overlay').hide(); 
    $('#dialog').hide().html(''); 
} 

function centerMe(element) { 
    //pass element name to be centered on screen 
    var pWidth = $(window).width(); 
    var pTop = $(window).scrollTop() 
    var eWidth = $(element).width() 
    var height = $(element).height() 
    $(element).css('top', '130px') 
    //$(element).css('top',pTop+100+'px') 
    $(element).css('left', parseInt((pWidth/2) - (eWidth/2)) + 'px') 
} 


</script> 


<a href="javascript:;//close me" onclick="openDialog($('#content'))">show dialog A</a> 

<a href="javascript:;//close me" onclick="openDialog($('#contentB'))">show dialog B</a> 

<div id="dialog" class="dialog" style="display:none"></div> 
<div id="overlay" style="display:none"></div> 
<div id="content" style="display:none"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl felis, placerat in sollicitudin quis, hendrerit vitae diam. Nunc ornare iaculis urna. 
</div> 

<div id="contentB" style="display:none"> 
    Moooo mooo moo moo moo!!! 
</div> 

Answer 2

Esa solución abrirá una nueva ventana del navegador sin las características normales, como la barra de direcciones y similares.

Para implementar una ventana emergente modal, le sugiero que eche un vistazo a jQuery y SimpleModal, que es realmente ingenioso.

(Éstos son algunos demos simples usando SimpleModal: http://www.ericmmartin.com/projects/simplemodal-demos/)

Answer 3

Estoy de acuerdo con las dos respuestas anteriores. Básicamente, desea usar lo que se conoce como "lightbox": http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

Es esencialmente un div que se crea dentro del DOM de su ventana/pestaña actual. Además del div que contiene el cuadro de diálogo, una superposición transparente impide al usuario interactuar con todos los elementos subyacentes. Esto puede crear efectivamente un diálogo modal (es decir, el usuario DEBE tomar algún tipo de decisión antes de continuar).

Answer 4

Usted puede tratar de abrir un diálogo modal con HTML5 y CSS3, prueba este código:

<head> 
<style> 
.windowModal { 
    position: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8); 
    z-index: 99999; 
    opacity:0; 
    -webkit-transition: opacity 400ms ease-in; 
    -moz-transition: opacity 400ms ease-in; 
    transition: opacity 400ms ease-in; 
    pointer-events: none; 
} 
.windowModal:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.windowModal > div { 
    width: 400px; 
    position: relative; 
    margin: 10% auto; 
    padding: 5px 20px 13px 20px; 
    border-radius: 10px; 
    background: #fff; 
    background: -moz-linear-gradient(#fff, #999); 
    background: -webkit-linear-gradient(#fff, #999); 
    background: -o-linear-gradient(#fff, #999); 
} 
.close { 
    background: #606061; 
    color: #FFFFFF; 
    line-height: 25px; 
    position: absolute; 
    right: -12px; 
    text-align: center; 
    top: -10px; 
    width: 24px; 
    text-decoration: none; 
    font-weight: bold; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -moz-box-shadow: 1px 1px 3px #000; 
    -webkit-box-shadow: 1px 1px 3px #000; 
    box-shadow: 1px 1px 3px #000; 
} 

.close:hover { background: #00d9ff; } 
</style> 
</head> 
<body> 

<a href="#divModal">Open Modal Window</a> 

<div id="divModal" class="windowModal"> 
    <div> 
     <a href="#close" title="Close" class="close">X</a> 
     <h2>Modal Dialog</h2> 
     <p>This example shows a modal window without using javascript only using html5 and css3, I try it it¡</p> 
     <p>Using javascript, with new versions of html5 and css3 is not necessary can do whatever we want without using js libraries.</p> 
    </div> 
</div> 
</body>