Formulaire qui apparaît dans une page HTML

**ridazero** · 02/06/2013, 19h39

salut tout le monde :
je travail sur un mini projet de fin de module , ( un mini réseau social )
et je souhaite intégré la fonctionnalité d'envoyer un MSG , alors je voudrais lorsque l'utilisateur Click sur ( un bouton ou un lien ) dans la même page il apparaît( comme une alert javascript ) un formulaire , j'ai besoin d'une astuce

**andry.aime** · 03/06/2013, 07h01

Bonjour,

Tu caches ton formulaire avec un display:none, lors du click, tu l'affiches avec display=block.

A+.

**hackoofr** · 03/06/2013, 09h40

Voici un petite idée extraite d'un autre programme.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a href="javascript:;" onClick="this.nextSibling.style.display=((this.nextSibling.style.display=='none')?'':'none');">Cliquer ici pour afficher ou bien cacher le Formulaire</a><span style="display: 

none;">&nbsp;texte masqué <BODY STYLE="filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#654321', EndColorStr='#123456')">
<CENTER><label><TABLE WIDTH="500" BORDER="3" BGCOLOR="#BBBBBB" BORDERCOLOR="#000000" CELLPADDING="3" CELLSPACING="5"></CENTER>
<TR BGCOLOR="#346E99">
<TD><CENTER><H2>LOGIN</H2></TD></CENTER></TR>
<TR BGCOLOR="#346E99">
<TD HEIGHT="150"><CENTER><B>Username  :  </B><INPUT TYPE="TEXT" NAME="USERNAME" SIZE="30"><P>
<B>Password  :  </B><INPUT TYPE="PASSWORD" NAME="PASSWORD" SIZE="30"><P>
<INPUT TYPE="SUBMIT" VALUE="  LOGIN  " ONCLICK="VERIFY" STYLE="filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#8ff2ff', 

EndColorStr='#008785')">
<INPUT TYPE="BUTTON" VALUE="SHUTDOWN" ONCLICK="SHUTDOWN" STYLE="filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0, StartColorStr='#8ff2ff', 

EndColorStr='#008785')">
<TR BGCOLOR="#346E99">
<TD><CENTER><div><span id="ChangeU" onClick="ChangeUser()"onmouseover="Pointer" 
onmouseout="DefaultCursor" style='color:LightBlue'>
<B>Change UserName </B></span></div></TD></CENTER></TR>
<TR BGCOLOR="#346E99">
<TD><CENTER><div><span id="ChangeP" onClick="ChangePass()"onmouseover="Pointer" 
onmouseout="DefaultCursor" style='color:LightBlue'>
<B>Change Password </B></span></div></TD></CENTER></TR>
</CENTER></TD></TR></TABLE></label>
</BODY></span>

**hackoofr** · 03/06/2013, 17h02

voici une autre méthode avec un bouton :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<style>
#form1{
   display:none;
}
</style>
<script type="text/javascript">
function hideThis(_div){
    var obj = document.getElementById(_div);
    if(obj.style.display == "block")
        obj.style.display = "none";
    else
        obj.style.display = "block";
}
</script>
 
<FORM id="form1" method="POST" action="page_traitement.php">
   <input type="text"/>
   <input type="submit" value="Valider"/>
</FORM>
<input type="button" value="Afficher/Cacher" onclick="hideThis('form1')"/>
</html>

**hackoofr** · 03/06/2013, 21h29

Dans cet exemple vous montre comment faire un bouton qui permet d'afficher/cacher du texte en javascript.
visibility est la fonction qui permet d'afficher et cacher des éléments (X)html en javascript.
Lors du clic sur le bouton, le contenu de celui-ci vas lui aussi être modifié grace à la fonction innerHTML.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
    <head>
        <title>Afficher / Cacher une boite div en javascript</title>
<style>		
        .bouton
{
        color:#0000ff;
        font-size:24px;
        cursor:pointer;
}
.bouton:hover
{
        text-decoration:underline;
}
.texte
{
        border:1px solid #333333;
        background:#eeeeee;
        padding:10px;
        color:#333333;
}
.texte:hover
{
        border:1px solid #000000;
        background:#cccccc;
        color:#000000;
}
</style>
<script type="text/javascript">
function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                document.getElementById(id).style.visibility="visible";
                document.getElementById('bouton_'+id).innerHTML='Cacher '+id;
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                document.getElementById('bouton_'+id).innerHTML='Afficher '+id;
        }
        return true;
}
</script>
    </head>
    <body>
        <span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher('texte');">Afficher le texte</span>
        <div id="texte" class="texte">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl. Phasellus quis nulla sit amet leo pretium tincidunt. Quisque eleifend augue quis urna. Curabitur rhoncus quam ac odio. In a nisi et purus fermentum aliquet. Donec sed leo aliquet lacus sollicitudin rhoncus. Duis ultricies euismod odio. Suspendisse potenti. Cras interdum, diam quis porta interdum, elit urna tincidunt ipsum, quis pharetra sem dui ac tortor. Cras lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum. Aliquam volutpat turpis at ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />
 
            Nullam in est vel dui dignissim pretium. Vestibulum at augue. Quisque pellentesque leo id mauris. Sed elit felis, posuere in, pharetra at, auctor vitae, massa. Nam faucibus ipsum eget libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elementum. In hac habitasse platea dictumst. Nunc interdum massa nec mi. Donec luctus nunc ac odio. Nulla id metus vel augue placerat elementum. Duis et lectus ut libero porttitor dictum. Aliquam faucibus, magna pharetra bibendum suscipit, mi libero vehicula enim, ornare tristique odio est eget tellus. Maecenas arcu nisl, dictum sit amet, luctus sit amet, tincidunt tincidunt, mauris. Cras purus lacus, hendrerit et, rhoncus et, dictum vel, tellus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam arcu ante, sagittis a, posuere ultrices, adipiscing in, quam. Integer facilisis suscipit ante. Proin sit amet leo.<br /><br />
 
            Morbi dui. Nunc faucibus dui ut sapien. Phasellus ac ligula faucibus felis placerat congue. Integer est arcu, vestibulum a, fringilla vel, laoreet quis, enim. Pellentesque facilisis. Duis nunc magna, ullamcorper in, volutpat interdum, volutpat ac, erat. Ut lacinia, nibh a fermentum scelerisque, nulla erat interdum est, vel eleifend sapien mauris malesuada dui. Phasellus ultricies orci nec lorem. In non erat tempor nisl dictum hendrerit. Quisque volutpat, nulla imperdiet pharetra scelerisque, tellus diam ullamcorper felis, vitae pretium justo lectus vitae turpis. Nam nec nunc vel ipsum imperdiet semper. Aenean mollis ullamcorper ipsum. Donec sollicitudin, arcu quis fermentum varius, eros felis feugiat nibh, at lacinia magna risus in lorem. In odio mi, commodo eu, consequat ac, pretium eu, purus. Pellentesque ac erat quis sapien ultricies pharetra.
        </div>
        <script type="text/javascript">
        //<!--
                afficher_cacher('texte');
        //-->
        </script>
    </body>
</html>

**ridazero** · 04/06/2013, 11h09

Merci pour vos réponse , ce que je désire c'est par exemple j'ai une page html qui contient quelque chose par exemple je voudrais affiché le formulaire sur le contenue qui existe déjà , comme le cas d facebook lorsqu'on click sur une photo un conteneur noir qui apparait sur le contenue qui existe deja

Formulaire qui apparaît dans une page HTML

JavaScript

Vue hybride

Discussions similaires

Partager

Partager