HTML・レイアウトの操作：
コンテンツ全面を覆うNodeの操作
<body>のfirst-childをコンテンツNodeとして、その弟関係にあるNodeを、ブラウザ全面を覆うように配置してライトボックス的に扱えるようにする。
カバーNodeの表示中は、ブラウザサイズを変更してもスクロールバーは出ない仕様。また、カバーNodeを閉じると、コンテンツ表示状態はスクロール位置を含めて元に戻る。
Bool
表示するか非表示にするかを指定 true = 表示する ・ false = 非表示にする
Node1
カバーとなるNodeを渡す id値を文字列で指定してもよい
Node2
コンテンツ全体をまとめるNodeを渡す id値を文字列で指定してもよい
省略した場合は <body> のfirst-child(div)が対象となる。
省略した場合は <body> のfirst-child(div)が対象となる。
●必須引数 ●オプション引数(省略可能)
記述例
$wholeCover(true, $id('wholepage'), $id('wholecover'))
$wholeCover(false, 'wholepage')
戻り値
予約変数『klibWholeCoverStatus』に現在の状態 true / false が設定される。
注意点
指定するカバーNodeの表示状態はCSSで設定する。
指定したカバーNodeは「display: table」として表示するので、子Nodeを「display: table-cell」に設定すれば容易に中央合わせを実現できる。
カバーNodeのonclickイベントハンドラに閉じるための関数を設定すると、内部の<a>タグをクリックした場合にも閉じてしまうので、その場合は、<a>タグのhref属性で $wholeCoverCancel() を先に実行して、閉じる動作をキャンセルさせることが可能。
タッチデバイスでページが拡大されている場合には、拡大前のページ状態に対して最適なサイズとしている。
動作サンプル
HTML :
<body>
<div id="wholepage">コンテンツ全体</div>
<div id="wholecover_black">
<div>WHOLE COVER BLACK</div>
</div>
<div id="wholecover_white" onclick="$wholeCover(false,'wholecover_white')">
<div>
WHOLE COVER WHITE
<a href="javascript:$wholeCoverCancel();aFunction();">ボタン</a>
</div>
</div>
</body>
Sass :
#wholecover_black, #wholecover_white {
display: none; //この関数によって「display: table」として表示される
z-index: 99999;
& > div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
Javascript :
$wholeCover(true,$id('wholecover_black'),'wholepage');
$wholeCover(true,'wholecover_white');
$wholeCover(false,'wholecover_white');
var coverStatus=klibWholeCoverStatus; //カバーNodeの表示状態を格納した予約変数
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。