Ouvrir une popup avec un simple bouton

Version imprimable

24/09/2017, 17h23
awesomeman

Ouvrir une popup avec un simple bouton

Bonjour,

Je débute en node js et je voulais créée un boutton qui affiche une popup (qui contiendra un formulaire d'inscription ) . Auriez vous des conseils pour faire ca ?
je ne vois pas quel type de boutton crééer, comment mettre le formulaire dans une popup ect ..

Merci pour vos conseils .

Bonne fin de journée ! :)
24/09/2017, 17h33
NoSmoking

Bonjour,
à voir Créez une fenêtre modale avec CSS et jQuery.

PS : peux être réalisé en « vanilla JS » voire en CSS.

salut tu peux le faire sans javascript ou avec javascript je te montre un exemple avec javascript et sans

code avec javascript

Code:

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
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
/*ce code n'a rien à avoire avec le affichage du formulaire c juste pour styliser*/
#showpopup{
    color: white;
    background-color: black;
    border: 3px solid darkorange;
    cursor: pointer;
    outline: none;
}           
#popup{
    border: 1px solid black;
    width: 300px;
    height: 200px;
}
        </style>
    </head>
    <body>
        <button id="showpopup">Afficher formulaire</button>
        <div id="popup" class="hide" style="position: absolute;display: none;">
            <form method="POST">
                <input type="text" name="pseudo" placeholder="pseudo"/><br/>
                <input type="email" name="email" placeholder="email"/><br/>
                <input type="password" name="pass" placeholder="mot de passe"/><br/>
                <input type="password" name="pass2" placeholder="retapez mot de pass"/><br/>
                <input type="submit" name="register" value="Je m'inscris"/></form><br/>
            </form>
        </div>
        <script>
var popup = document.getElementById("popup")
var showpopup = document.getElementById("showpopup")
function hidePopupClass(){
    showpopup.innerHTML = "Cacher formulaire"
    popup.className = "show"
    popup.style.display = "block"
}
function showPopupClass(){
    showpopup.innerHTML = "Afficher formulaire"
    popup.className = "hide"
    popup.style.display = "none"
}
showpopup.addEventListener("click" , function(){
    switch(popup.className){
        case "hide": 
            hidePopupClass()
        break
        case "show":
            showPopupClass()
        break
        default: 
            alert("Ne modifier pas le code svp")
    }
})
        </script>
    </body>
</html>

et le code sans javascript

Code:

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
 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
/*ce code n'a rien à avoire avec le affichage du formulaire c juste pour styliser*/
#showpopup{
    display: none;
}           
label[for="showpopup"]{
    color: white;
    background-color: black;
    border: 3px solid darkorange;
    cursor: pointer;
    outline: none;
}
label[for="showpopup"]::selection{
    display: none;
}
#popup{
    display: none;
    border: 1px solid black;
    position: absolute;
    width: 300px;
    height: 200px;
}
#showpopup:checked ~ #popup{
    display: block;
} 
        </style>
    </head>
    <body>
        <input type="checkbox" id="showpopup"/>
        <label for="showpopup">Cliquer ici pour afficher ou cacher le formulaire</label>
        <div id="popup">
            <form method="POST">
                <input type="text" name="pseudo" placeholder="pseudo"/><br/>
                <input type="email" name="email" placeholder="email"/><br/>
                <input type="password" name="pass" placeholder="mot de passe"/><br/>
                <input type="password" name="pass2" placeholder="retapez mot de pass"/><br/>
                <input type="submit" name="register" value="Je m'inscris"/></form><br/>
            </form>
        </div>
    </body>
</html>

tu peux régler leur position avec les propiété
left
top
right
bottom
en css
et dit moi si ca marche

25/09/2017, 13h55
awesomeman

Ah Merci, ca m'aide déjà beaucoup .
Mais je pensais plus faire un truc de ce genre :

http://www.webascender.com/Portals/0...ation-form.png

De toute facon je vais etre obligé de faire des requetes ajax pour envoyer le formulaire contenu dans la popup .
25/09/2017, 16h07
NoSmoking

Citation:

Mais je pensais plus faire un truc de ce genre : ...

c'est juste de la mise en forme via le CSS.

Citation:

De toute facon je vais etre obligé de faire des requetes ajax pour envoyer le formulaire contenu dans la popup .

je ne vois pas le rapport^* avec la question initiale !?!

^* Peut-être pour l'utilisation du javascript !

essaie ca

Code:

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
<!DOCTYPE html>
<html>
    <head>
        <style>
*::selection{
    background-color: lightgreen;
    color: orange;
}
body{
    margin: 0px;
    padding: 0px;
}
#popup{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8); 
}
#popup_content{
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/61/89/e7/6189e7aeb11c3483ea1d81202e1b89b8.gif");
    margin: auto;
    padding: 20px;
    border: 6px solid green;;
    width: 45%;
    height: 70%;
}
#popup_content form *{
    display: block;
    margin: auto;
}
#close_popup{
    float: right;
    display: block;
}
#close_popup img{
    width: 20px;
    height: 25px;
}
#close_popup img::selection{
    display: none;
}
#close_popup:hover, #close_popup:focus{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
#popup_content form input{
    font-size: 30px;
    outline: none;
    box-shadow: 3px 3px 3px orange;
    border-top-left-radius: 40%;
    border-bottom-right-radius: 40%;
    padding: 10px;
}
#popup_content form input[type="submit"]{
    cursor: pointer;
    background: limegreen;
    color: darkred;
}
#popup_content form input::placeholder{
    color: darkred;
    text-align: center;
    font-family: verdana;
}
        </style>
    </head>
    <body>
        <button id="show_popup">Show popup</button>
        <div id="popup">
            <div id="popup_content">
                <span id="close_popup"><img src="https://cdn.pixabay.com/photo/2014/03/25/16/33/cancel-297373_960_720.png"/></span><br/>
                <form method="POST">
                    <br/><input type="text" name="pseudo" placeholder="pseudo"/><br/>
                    <input type="email" name="email" placeholder="email"/><br/>
                    <input type="password" name="pass" placeholder="mot de passe"/><br/>
                    <input type="password" name="pass2" placeholder="retapez mot de pass"/><br/>
                    <input type="submit" name="register" value="Je m'inscris"/></form><br/>
                </form>
            </div>
        </div>
        <script>
var popup = document.getElementById('popup');
var show_popup = document.getElementById("show_popup");
var close_popup = document.getElementById("close_popup");
show_popup.onclick = function(){
    popup.style.display = "block";
}
close_popup.onclick = function(){
    popup.style.display = "none";
}
window.onclick = function(event){
    if(event.target == popup){
        popup.style.display = "none";
    }
}
        </script>
    </body>
</html>

28/09/2017, 17h54
awesomeman

Merci beaucoup, c'est reglé :)