web-dev-qa-db-fra.com

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, j'appelle la méthode JavaScript parente. Cela ne se produit 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 le parent javascript. Mais la fenêtre n'est pas modale.

Comment résoudre ceci? Puis-je écrire quelque chose dans le menu contextuel de l'enfant pour toujours en haut?

javascriptasp.netcss
8
James123

Une fenêtre contextuelle est un enfant de la fenêtre parent, mais ce n'est pas un enfant du document parent. Il s'agit de sa propre fenêtre de navigateur indépendante et n'est pas contenu par le parent.

Utilisez plutôt une DIV en position absolue 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>
38
Diodeus - James MacFarlane

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

Cette solution ouvrira une nouvelle fenêtre de navigateur sans les fonctionnalités habituelles telles que la barre d’adresses et similaires.

Pour implémenter un popup modal, je vous suggère de regarder jQuery et SimpleModal , qui est vraiment lisse.

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

3
Martin S Ek

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

C'est essentiellement un div créé dans le DOM de votre fenêtre/onglet actuel. En plus de la div contenant 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 un dialogue modal (c’est-à-dire que l’utilisateur DOIT prendre une décision avant de poursuivre).

0
Jonathan Nesbitt