定番
新着
履歴

jQuery オーバーレイのサンプル

サンプル
コード
[1] フッター全体にオーバーレイで要素を出す。
発動
[1] 画面下部全体を使います
サンプル
コード
[2] フッターからにオーバーレイで要素を出す。トーストとも呼ばれます。
発動
[2] 長方形が飛び出します
© 2024 kipure
Top



<style>
#content{
min-height:900px;
}
.con{
padding: 20px;
text-align: center;
}

.overlay{
bottom: 0;
left: 0;
position: fixed;
z-index: 1000;
width: 100%;
height: 100px;
background-color: #7923e8;
color: #FFF;
display: none;
}
</style>

<script>

$(function(){
	var $overlay =$('.overlay');
	var sv = 0;
	$(".tog_btn").click(function(){
		$overlay.slideDown();
		if ( $(".tog_btn").hasClass("done") ){
			$overlay.slideUp();
			$(".tog_btn").removeClass("done");
		}else{
			$overlay.slideDown();
			$(".tog_btn").addClass("done");
		}
	});
});

</script>

<div class="pd10">[1] フッター全体にオーバーレイで要素を出す。</div>

<div class="btn tog_btn">発動</div>





<div class="overlay">
	<div class="con">[1] 画面下部全体を使います</div>
</div>



<style>


.overlay2{
position: fixed;
z-index: 300;
bottom: 0;
left: 50%;
margin:0 0 0 0px;
width: 200px;
height: 250px;
background-color: #e82386;
color: #FFF;
display: none;
}

</style>

<script>

$(function(){
	var $overlay =$('.overlay2');
	var sv = 0;
	$(".tog_btn2").click(function(){
		$overlay.slideDown();
		if ( $(".tog_btn2").hasClass("done") ){
			$overlay.slideUp();
			$(".tog_btn2").removeClass("done");
		}else{
			$overlay.slideDown();
			$(".tog_btn2").addClass("done");
		}
	});
});

</script>

<div class="pd10">[2] フッターからにオーバーレイで要素を出す。トーストとも呼ばれます。</div>

<div class="btn tog_btn2">発動</div>



<div class="overlay2">
	<div class="con">[2] 長方形が飛び出します</div>
</div>