Html，CSS，php隱藏分區

Question

當點擊右邊的div時，我希望這個div消失。 怎麼樣？

這是頁面

<?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">&sdot;</li> 
      <li> 
      <a href="aPropos.Php">Qui Sommes-Nous ?</a> 
      </li> 
      <li class="footer-menu-divider">&sdot;</li> 
      <li> 
      <a href="Contact.php">Contact</a> 
      </li> 
     </ul> 
     <p class="copyright text-muted small">Gestion D'Effectif &copy; <?php echo "Juin "; echo date("Y");?></p> 
     </div> 
    </div> 
    </div> 
</footer> 
</div> 
<?php include $tpl . "Footer.Php"; ?> 

這的HTML和PHP是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; 
} 

我嘗試了一些JavaScript，但它不工作，我快凍僵了這一權利現在我沒有找到任何解決方案！

Answer 1

只是猜測這裏...

但是你可以使用jQuery來改變疊加的CSS。

讓我們包含一切，構成了覆蓋在一個單一的div和調用它

<div id="overlay">.......</div> 

而且讓我們把剛纔的「X」在它自己的DIV

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

所以我們有看起來像這樣的東西...

<div id="overlay"> 
<div id="close"> 
<a href="#">X</a> 
</div> 
</div> 

然後，impliment jQuery改變「覆蓋」的樣式，點擊「關閉」時。

$('#close').click(function() { 
    $('#overlay').css({ 
     'display': 'none', 
    }); 
}); 

很確定會工作。 :)

Answer 2

$(document).ready(function() { 
    $("#mydiv").hide();  //here give the id of div 
});