1
熱が自分の脳を溶かしているように見えるので、助けを求めている人がいます。私は愚かな問題を抱えています。そして、私はおそらく休憩をとり、これに戻ってくるべき状況の中で、ちょっとしています。クラス間で切り替えてコンテンツをスライドさせるには
基本的に私がしたいのは、ユーザーが「About Me」ボタンをクリックした後に.closeクラスボタンで閉じるときに追加/削除クラスを追加することだけです。
何らかの理由で私は何が間違っているのか分かりません。私は、これを追加/削除するためにjQueryが必要であることを知っています。また、オーバーレイのアクティブな状態を追加し、幅を100％に設定するために、新しいクラスをセットアップする必要があることも知っています。私は瞬間にあまり喜んでいません。私はホバリングでうまく動作しているが、それはモバイルのために十分ではないので、私はこれのためにonClickイベントが必要です。これまでこれまでに来た。私は近いうちに知っている、どんな助けも高く評価されるだろう。事前のおかげで自分の関数で
のjQueryコード
//open on click
$(".slideIn").click(function(){
$(".overlay").addClass('.overlay-active');
});
//close on x button click
$(".close").click(function(){
$(".overlay").removeClass('.overlay-active');
});
HTMLコード
<section class="intro" role="region">
<div class="split-screen row">
<div class="col-sm-12 col-lg-6 left">
<a class="btn-btn-primary slideIn" style="color:#fff;" title="link to landing page task" href="#"><h2>About Me</h2></a>
<div class="overlay">
<div class="text">
<figure class="col-lg-4"><img class="img-responsive" src="img/nick_avatar.png" ></figure>
<div class="col-lg-8">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3>Nick</h3>
<p>some text| some text | some text</p>
<q>a bit more text for us to read here, why not</q>
<br/><br/>
<h3>Lets Connect</h3>
<div class="social row">
<a href="#" class="tel" title="Call Me" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-phone" aria-hidden="true"></i></a></li>
<a href="#" class="mail" title="E-mail Me" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-envelope" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On Twitter" title="Connect With Me On Twitter" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On LinkedIn" title="Connect With Me On LinkedIn" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-linkedin fa-lg" aria-hidden="true"></i></a>
<a target="_blank href="#" alt="Connect With Me On CodePen" title="Connect With Me On CodePen" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-codepen fa-lg" aria-hidden="true"></i></a>
<a target="_blank" href="#" alt="Connect With Me On GitHub" title="Connect With Me On GitHub" data-toggle="tooltip" data-placement="bottom" role="link"><i class="fa fa-github fa-lg" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 right">
<a class="btn-btn-primary" title="link to landing page task" href="#"><h2>To The Task</h2></a>
</div>
</div>
</section>
CSSコード
html{
height:100%
}
body{
height:100%;
}
.intro{
height:100%
}
.split-screen{height:100%;}
.left{
position: relative;
display : flex;
justify-content : center;
align-items : center;
background-color:#009dcc;
height : 100%;
color : #FFF;
}
.right{
display : flex;
justify-content : center;
align-items : center;
background-color:#FFF;
height : 100%;
color : #000000;
}
@media (max-width: 1200px) {
.left{
height:50%
}
.right{
height:50%
}
}
.fa{margin:15px;}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 100%;
background-color: #008CBA;
overflow: hidden;
transition: .5s ease;
}
.overlay-active {
width: 100%;
}
.fa{color:#ffffff;}
.fa:hover{color:#fac600;}
.text {
position: absolute;
top: 50%;
left: 50%;
width:84%;
height:50%;
white-space: nowrap;
color: white;
font-size: 20px;
overflow: hidden;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
figure{padding:10px;}
figure img{
border:3px solid #fff;
border-radius:50%;
}
.social{border-top: 2px solid #fff;}
@media all and (max-width: 768px) {
figure{display:none;}
.text{padding:5px; height:67%;}
}
@media all and (max-width: 468px) {
p,q{font-size:12px;}
}