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 
});