Html,CSS,php隐藏分区
问题描述:
当点击右边的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">⋅</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"; ?>
这的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,但它不工作,我快冻僵了这一权利现在我没有找到任何解决方案!
答
只是猜测这里...
但是你可以使用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',
});
});
很确定会工作。 :)
答
$(document).ready(function() {
$("#mydiv").hide(); //here give the id of div
});
的[什么getElementsByClassName方法返回?]可能的复制(http://*.com/questions/10693845/what-does-getelementsbyclassname-return) –
尝试'document.getElementsByClassName('搜索覆盖').style.display =' 无“; ' –
如果你正在使用jQuery,请试试'$('。search-overlay')。hide();' –