<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>