Window.open comme popup modal?

Je veux ouvrir window.open comme popup 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);

Je peux utiliser Window.ShowModelDialog() , mais dans ma fenêtre enfant, Window.ShowModelDialog() méthode javascript parent. Cela ne se passe pas avec ShowModelDialog ().

  function CallParentScript(weburl) { alert(weburl); if (weburl != null) { var url = weburl; window.opener.SelectUserImageCallback(url); window.close(); return false; } }

Si j'utilise window.open() . Je peux appeler javascript parent. Mais la fenêtre n'est pas modale.

Comment résoudre ce problème? Puis-je écrire quelque chose dans un popup enfant pour toujours compléter?

Un pop-up est un enfant de la fenêtre parent, mais ce n'est pas un enfant du DOCUMENT principal. C'est sa propre fenêtre de navigateur indépendante et n'est pas contenue par le parent.

Utilisez à la place un DIV absolument positionné et une superposition translucide.

EDIT – exemple

Vous avez besoin de jQuery pour cela:

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

Vous pouvez essayer d'ouvrir une boîte de dialogue modale avec html5 et css3, essayez ce code:

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

Cette solution ouvrira une nouvelle fenêtre de navigateur sans les fonctionnalités normales telles que la barre d'adresse et similaire.

Pour mettre en place une popup modale, je vous suggère de jeter un oeil à jQuery et SimpleModal , ce qui est vraiment mince.

(Voici quelques démonstrations simples en utilisant SimpleModal: http://www.ericmmartin.com/projects/simplemodal-demos/ )

Je suis d'accord avec les deux réponses précédentes. Fondamentalement, vous souhaitez utiliser ce qu'on appelle une "lightbox" – http://en.wikipedia.org/wiki/Lightbox_(JavaScript)

Il s'agit essentiellement d'un div créé par le DOM de votre fenêtre / onglet actuel. En plus du div qui contient votre boîte de dialogue, une superposition transparente empêche l'utilisateur d'engager tous les éléments sous-jacents. Cela peut effectivement créer une boîte de dialogue modale (c'est-à-dire que l'utilisateur DOIT prendre une sorte de décision avant de passer).