定番
新着
履歴

jQuery オーバーレイ スマホ版のサンプル

サンプル
コード
bodyタグの直下にバナーを挿入するパターンと 画面下部に固定するパターンを同時に掲載しています。
© 2024 kipure
Top



<style>
	body,ul,li,p{padding:0;margin:0px;}
	ul,li{list-style-type: none;}
</style>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>



<style>


#header_app{
	height:70px;
	top:0px;
	width:100%;
	line-height: 100%;
}

#header_app .banner{
	margin:0px auto;
	padding: 5px;
	width:320px;
	height:60px;
	text-align:left;
	font-size:11px;
	background-color:#CCC;
}
#header_app .banner .app_img{
	float:left;
	padding-right:5px;
}
#header_app .banner .app_img img{
	width:60px;
	border-radius:10px;
}
#header_app .banner .demo_btn{
	float:right;
	background-color:#00ab4e;
	color:#FFF;
	padding:5px 10px;
	border-radius:10px;
	font-size:11px;
	margin: 5px;
}


#footer_app{
	height:70px;
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:#FFF;
	z-index:2;
	line-height: 100%;
}
#footer_app .banner{
	margin:0px auto;
	width:320px;
	padding: 5px;
	height:60px;
	text-align:left;
	font-size:11px;
	background-color:#00ab4e;
}
#footer_app .banner .app_img{
	float:left;
	padding-right:5px;
}
#footer_app .banner .app_img img{
	width:60px;
	border-radius:10px;
}

#footer_app .banner .demo_btn{
	float:right;
	background-color:#0095da;
	color:#FFF;
	padding:5px 10px;
	border-radius:10px;
	border:solid 1px #FFF;
	font-size:11px;
	margin: 5px;
}

.header_app_close{
	background-color:#999;
	color:#FFF;
	cursor:pointer;
	width:20px;
	font-size:14px;
	line-height:20px;
	text-align:center;
	float:right;
}

.footer_app_close{
	background-color:#FFF;
	color:#444;
	border:solid 1px #444;
	border-radius:5px;
	cursor:pointer;
	width:20px;
	font-size:14px;
	line-height:20px;
	text-align:center;
	float:right;
}



</style>

<style>
footer {
margin-bottom: 30px;
}
</style>

<script>

$(document).ready(function(){

	$("body").prepend('<div id="header_app"><div class="banner"><div class="app_img"><img src="/image/top/ki_icon144.png"></div>アプリの説明<div class="header_app_close">×</div><div class="demo_btn">ダウンロード</div></div></div>');


	$(".header_app_close").click(function() {
		$("#header_app").remove();
	});

	$(".footer_app_close").click(function() {
		$("#footer_app").remove();
	});


});







</script>


bodyタグの直下にバナーを挿入するパターンと
画面下部に固定するパターンを同時に掲載しています。


<div id="footer_app">
	<div class="banner">
		<div class="app_img"><img src="/image/top/ki_icon144.png"></div>
		アプリの説明など
		<div class="footer_app_close">×</div>
		<div class="demo_btn">無料ダウンロード</div>
	</div>
</div>