実行結果
DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery
画面に半透明オーバーレイ表示・非表示
設置サンプルのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var width="100%";
var height="100%";
var o=$("body");
$("#btn_overlay").click(function(){
/* body要素の末尾にコンテンツ挿入 */
o.append("<div id='overlay'></div>");
o.append("<button id='btn_close'>オーバーレイ解除</button>");
/* 表示領域のサイズを取得 */
if($.browser.opera){
// Opera (document.documentElement.clientHeightがあるので先に処理)
width=document.body.clientWidth;
height=document.body.clientHeight;
}else if(typeof document.documentElement.clientWidth=='number'){
// Firefox, IE, Safari 3
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}else if(typeof window.innerWidth=='number'){
// Safari 2
width=window.innerWidth;
height=window.innerHeight;
}
height=o.attr("scrollHeight");
$("#overlay").css({
"opacity":"0.5",
"width":width,
"height":height
});
/* 解除ボタンをクリックしたら、オーバーレイを削除 */
$("#btn_close").click(function(){
$("#overlay").remove();
$("#btn_close").remove();
});
});
});
</script>
<style type="text/css">
#overlay {
display:block;
overflow:hidden;
position:absolute;
left:0; top:0;
background:#000;
}
#btn_close {
position:absolute;
left:45%; top:300px;;
color:#000;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>DOM制御・更新処理:内部にコンテンツを挿入:append()の使用例 | jQuery</h1>
<h2>画面に半透明オーバーレイ表示・非表示</h2>
<!-- CODE -->
<p><button id="btn_overlay">オーバーレイ表示</button></p>
<!-- CODE / -->
</div>
</body>
</html>