Faire un deuxième modal en cas de mauvaise réponse

Bonjour, j'ai crée un modal pour avoir accès à un lien via un mot de passe Voici le code html :

<div class="activite">
                    <a href="#open">
                        <img class="activiteimg" src="asset/image/ma_page/ludo.png" alt="communion">
                        <div class="infoactivite">
                            Communion de ludovic
                        </div>
                    </a>
                </div>

                <div id="open" class="modal">
                    <div class="modal_content">
                        <p class="padlock"><img src="asset/image/ma_page/padlock.png" alt="padlock"></p>
                        <p class="text">Ce lien est protègé par un mot de passe.</p>
                        <form action="password.php" method="post">
                            <p>
                                <input class="form1" type="password" name="password" placeholder="Entrez votre mot de passe" /><br>
                                <input class="form2" type="submit" value="Valider" />
                            </p>
                        </form>

                        <a href="#close" class="close">X</a>
                    </div>
                </div>

et la page en php qui la traite

<?php
if (isset($_POST['password']) and $_POST['password'] != 'kangou') // si il y a un MP et qu'il est différent de (kangou)
{
    header('location: index.php');
    
} else {
    header('location: communion.php');
}

et le code css

.modal {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(77, 77, 77, 0.95);
    transition: all .4s;
}

.modal:target {
    visibility: visible;
    opacity: 1;
}

.modal_content {
    border-radius: 4px;
    position: relative;
    width: 500px;
    max-width: 90%;
    background: rgb(209, 203, 203);
    padding: 1.5em 2em;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: rgb(241, 7, 7);
    text-decoration: none;
}

.padlock {
    display: flex;
    justify-content: center;
}

.text {
    text-align: center;
}

form {
    display: flex;
    justify-content: center;
}

.form1 {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid black 2px;
    width: 300px;
    height: 25px;
    background-color: rgb(209, 203, 203);
    outline: none;
}

.form2{
    width: 150px;
    height: 40px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
    background-color: #4767F5;
    border: solid #4767F5 2px;
    border-radius: 10px;
}

La question est dans le titre, peut on faire un deuxième modal en cas de mauvaise réponse et surtout comment l’appeler via le href ?
Modifié par ricem (29 Apr 2024 - 09:42)

Merci niuxe.
mais on peut rien faire en html et css, parce que JS me donne des boutons.

Bonjour,

C'est en php qu'il faut faire ça, en utilisant le mécanisme des sessions.

Par exemple (en essayant de modifier le moins possible ton code actuel), on met dans password.php :

<?php
session_start();
if (isset($_POST['password']) and $_POST['password'] == 'kangou')
{
    $_SESSION['connected']=true;
    include 'communion.php';
}
else
{
    $_SESSION['connected']=false;
    include 'index.php';
}
?>

Pour une protection efficace, il faudrait de plus rajouter dans communion.php :

<?php
if(isset($_SESSION) and $_SESSION["connected"])
{
?>
... mettre ici le code html de communion.php ...
<?php } else include "index.php"; ?>

Amicalement,