Forum : Quel est la technique à utiliser ?

golendercaria,

il y a 14 ans

Bonsoir, en faite c'est pas si compliqué, tu dois d'abord créer une "fenêtre" qui se traduit par une balise html "<div>" qui prend toute la fenêtre de l'utilisateur (que tu cache). Dans un second temps
tu crées, par exemple ton formulaire dans une boite "<div>" et naturellement tu la cache aussi. Quand veux appeler ton formulaire en popin le truc est tous bête, tu affiche ta "<div>" fenêtre ce qui te permet
de bloquer tous le site par exemple (voir z-index) et tu affiche ta boite formulaire.

Et... quand tu veux sortir de la popin tu déclenche une action sur le click de la "<div>" fenêtre qui va re-caché tous (display:none);

J’espère que j'ai pas trop bafouiller XD et que sa ta aider. Je peux éventuellement te coder un exemple si sa t’intéresse.

siriu,

il y a 14 ans

Bonjour golendercaria

Merci pour ta réponse, c'est très clair je pense avoir compris :)
Si tu as déjà ce type de code, je veux bien le voir comme exemple, encore merci beaucoup !

golendercaria,

il y a 14 ans

Yop, je tiens juste a dire que ce le code qui suit n'est pas de moi XD
L'exemple est directement exploitable. (même sans les images).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple JQuery Modal Window from Queness</title>
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>-->
<script type="text/javascript" src="./jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {  
    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();

        //Get the A tag
        var id = $(this).attr('href');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

    });

    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

});
</script>
<style>
body { font-family:verdana; font-size:15px; }
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}
#boxes #dialog1 { width:375px; height:203px; }
#dialog1 .d-header { width:375px; height:150px; }
#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}
#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent; 
  width:267px; 
  height:53px;
}
#dialog1 .d-login {
  float:left;
  width:108px; 
  height:53px;
}
#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent; 
  width:326px; 
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>
<ul>
<li><a href="#dialog1" name="modal">Login Dialog Box</a></li>
</ul>

<div id="boxes">
        <!-- Start of Login Dialog -->  
        <div id="dialog1" class="window">
          <div class="d-header">
            <input type="text" value="username" onclick="this.value=''"/><br/>
            <input type="password" value="Password" onclick="this.value=''"/>    
          </div>
          <div class="d-blank"></div>
          <div class="d-login"><input type="image" alt="Login" title="Login" src="images/login-button.png"/></div>
        </div>
        <!-- End of Login Dialog -->  

        <!-- Mask to cover the whole screen -->
          <div id="mask"></div>
</div>

</body>
</html>

siriu,

il y a 14 ans

merci golendercaria, c'est bien ce que j'avais compris, effectivement c'est assez simple :)

Quel est la technique à utiliser ?

4 réponses