Popup disparaît après validation d'un formulaire

Bonjour à tous,

Voilà j'aimerai qu'après la validation d'un formulaire, il s'affiche une pop up en transparence avec un texte. J'ai réussi, mais quand je click sur " valider ", la pop up apparaît et disparaît aussitôt. Elle ne reste pas affichée.

J'ai simplifié le code pour + de facilité, le voici :

HTML =

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Réservation</title>
  <link rel="stylesheet" href="css/style.css">
  <script type = "text/javascript" src="js/popup.js"></script>
</head>
<body>
 
<div id="main">
 
    <div id="center">
 
        <form action="" method="get" class="form-example">
 
 
            <button id="submit" onclick="openForm()">Test</button>
 
        </form>
 
    <div id="popup">
        <p> Confirmation </p>
    </div>
 
    </div>
 
 
 
</div>    
</body>
</html>

CSS =

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
body  {
    background: black;
    color: white;
    font-family: sans-serif;
}
 
#main {
    width: auto;
}
 
#center {
    margin:auto;
    width: 400px;
}
 
/*-------------------- POP UP CONFIRM --------------------*/
 
#popup {
    color: black;
    background-color: white;
    width: 50%;
    height: 50%;
    position:absolute;
    left: 25%;
    top: 25%;
    display:none;
    opacity: 95%;
}

JS =

Code:

1
2
3
4
5
6
function openForm() {
  document.getElementById("popup").style.display = "block";
}
function closeForm() {
  document.getElementById("popup").style.display = "none";
}

Voilà si quelqu'un a une explication, je suis preneur.

Ca fait des heures que je cherche, là j'abandonne :lol:

Merci d'avance à ceux qui prendront le temps de m'aider.

le souci est que le bouton envoie le formulaire ce qui recharge la page.

pour éviter cela, mettez cela dans le code html

Code:

<button id="submit" onclick="openForm(event)">Test</button>

et ensuite cela dans le code javascript :
Code:

1 2 3 4 5 function openForm(event) { event.preventDefault(); document.getElementById("popup").style.display = "block"; }

Super ça fonctionne ! Un grand merci à toi :P