Forum : Quel est la technique à utiliser ?

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

Auteur

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

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

Auteur

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

Quel est la technique à utiliser ?

4 réponses