Html, CSS,php hide a div

Question

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">&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"; ?>

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!

Answer 1

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

Answer 2

Just guessing here...

But you could use jQuery to change the css of the overlay.

Let's contain everything that makes up the overlay in a single div and call it

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

And let's put just the "x" in it's own div

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

So we've got something that looks like this...

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

Then, impliment jQuery to change the styling of "overlay" when "close" is clicked.

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

Pretty sure that'll work. :)