When clicking on the div that is in the right i want this div to disappear. how please?
this is the html and php of the page
<?php $title = "Contact"; $HeaderIntro = ""; include 'Init.Php'; if (!empty($_POST)) { if ((isset($_POST['email']))&&(isset($_POST['objet']))&&(isset($_POST['message']))) { if(((!empty($_POST['email']))&&(!empty($_POST['objet']))&&(!empty($_POST['message'])))) { $email = $_POST['email']; $objet =$_POST['objet']; $message = $_POST['message']; $req="INSERT INTO `contact`(`Emeteur`,`objet`, `message`) VALUES ('".$email."', '".$objet."', '".$message."')"; $res=$conn->query($req); $b=1; } else { $b=2; } } } ?> <script> function lol() { document.getElementsByClassName("search-overlay").setAttribute("style", "display:none;"); } </script> <div class='search-overlay rubberBand' <?php if ($b==1) { echo 'style="display: block;"'; } elseif ($b==2) { echo 'style="display: block;"'; } else { echo ''; } ?>> <a href='' class='toggle-search' onclick="lol()"><i class='fa fa-close'></i></a> <div class='<?php if ($b==1) { echo 'suc'; } elseif ($b==2) { echo 'echec'; } else { echo ''; } ?>'><?php if ($b==1) { echo 'Votre Message Est Envoyé'; } elseif ($b==2) { echo 'Remplir Tous Les Champs!'; } else { echo ''; } ?></div> </div> <div id="wrap"> <div class="container-fluid intro-header"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Nous Contacter</h2> <hr class="colored"> </div> </div> <div class="row content-row"> <div class="col-lg-6 col-lg-offset-3"> <form name="sentMessage" method="post" action=""> <div class="row control-group"> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Adresse Email</label> <input type="email" class="form-control" placeholder="Adresse Email" id="email" name="email" value="<?php if(isset($email)) { echo $email; } ?>"> <p class="help-block text-danger"></p> </div> </div> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Objet Du Message</label> <input type="text" class="form-control" placeholder="Objet Du Message" id="objet" name="objet" value="<?php if(isset($objet)) { echo $objet; } ?>"> <p class="help-block text-danger"></p> </div> <div class="form-group col-xs-12 floating-label-form-group controls"> <label>Message</label> <textarea rows="4" class="form-control" placeholder="Message" id="message" name="message" value="<?php if(isset($message)) { echo $message; } ?>"></textarea> <p class="help-block text-danger"></p> </div> <div class="row"> <div class="form-group col-xs-12"> <button type="submit" class="btn btn-outline-dark">Envoyer</button> </div> </div> </form> </div> </div> </div> </div> <footer> <div class="container"> <div class="row"> <div class="col-lg-12"> <ul class="list-inline"> <li> <a href="Accueil.Php">Accueil</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="aPropos.Php">Qui Sommes-Nous ?</a> </li> <li class="footer-menu-divider">⋅</li> <li> <a href="Contact.php">Contact</a> </li> </ul> <p class="copyright text-muted small">Gestion D'Effectif © <?php echo "Juin "; echo date("Y");?></p> </div> </div> </div> </footer> </div> <?php include $tpl . "Footer.Php"; ?> This is the css :
a.toggle-search { position: absolute; right: 6%; top: 53px; color: #fff; font-size: 2em; cursor: pointer; z-index:99; } .search-overlay { display: none; width: 100%; height: 100%; right: 0; z-index: 1; bottom: 0; position: fixed; left: 0; top: 0; background: rgba(107, 121, 136, 0.91); } .suc { position: absolute; top: 47px; left: 548px; color: #fff; font-weight:bold; background-color: rgba(13, 210, 46, 0.71); font-size: 20px; padding: 20px; border-radius: 50px; font-family: cursive; } .echec { position: absolute; top: 38px; left: 539px; color: #fff; font-weight:bold; background-color: rgba(187, 27, 27, 0.85); font-size: 20px; padding: 20px; border-radius: 50px; font-family: cursive; } .rubberBand { -webkit-animation: rubberBand .8s 1; -moz-animation: rubberBand .8s 1; -o-animation: rubberBand .8s 1; animation: rubberBand .8s 1; } I tried some javascript but it doesn't work, i'm freezing on this right now i didn't found any solution!
document.getElementsByClassName('search-overlay').style.display='none';$('.search-overlay').hide();