オーバーレイ | よく使うjQuery

オーバーレイ | よく使うjQuery

オーバーレイもよく使うのですが、メモし忘れていました。今回は画像のプレビューでよくあるオーバーレイのサンプルソースをjQueryで記載したいと思います。




オーバーレイ
■html
<body>
<div id="shadow"></div>
<div id="sample">クリック!!!!!!</div>
</body>
■javascript
$(function() {
	$("#shadow").css({
	opacity: '0.6',
	display: 'none',
	position: 'absolute',
	top: '0',
	width: '100%',
	height: '100%',
	background: '#000',
	zIndex: '1'
	});
	$("#sample").click(function() {
		$("#shadow").css('display', 'block');
	});
	$("#shadow").click(function() {
		$("#shadow").css('display', 'none');
	});
});

解説

まず、htmlソースの解説です。

<div id="shadow"></div>
<div id="sample">クリック!!!!!!</div>

ID名「shadow」は画面全体をオーバーレイする為の要素です。ID名「sample」は「shadow」を表示する為のボタンです。
続いてjavascript部分です。

	$("#shadow").css({
	opacity: '0.6',
	display: 'none',
	position: 'absolute',
	top: '0',
	left: '0',
	width: '100%',
	height: '100%',
	background: '#000',
	zIndex: '1'
	});

ID名「shadow」のスタイルを設定します。上から
opacity・・・透過度
display・・・表示・非表示を制御します、ページの読み込み時は”none”で非表示にします。
position・・・配置方法を指定します。absoluteで絶対位置指定にします。
topleft・・・「position」を「absolute」にしたので「top」と「left」で位置を指定します。
widthheight・・・横幅と縦幅の指定です。画面全体をおおうのでそれぞれ100%にしてあります。
background・・・背景色を指定します。この背景色は「opacity」で透過します。色はお好みで
zIndex・・・他にz-indexの指定が無ければ1でよいです。ちなみにshadowの上に重ねる要素はz-indexの値を「shadow」で指定している値以上にして下さい(あとpositionはabsoluteで)。

	$("#sample").click(function() {
		$("#shadow").css('display', 'block');
	});

ID名「sample」をクリックしたら「shadow」のスタイルをdisplay: none;からdisplay: block;にして表示します。

	$("#shadow").click(function() {
		$("#shadow").css('display', 'none');
	});

display: block;状態の要素「shadow」をクリックすると、display: none;に変更し再び非表示にします。



“オーバーレイ | よく使うjQuery” への7件のフィードバック

  1. 貴重なヒントありがとうございます。
    厚かましい質問ですが、#shadowに配置した画像は透過せずに
    バックグラウンドのみ透過するにはどうすればいいでしょうか。
    私なりに考えてみましたが知識がたりませんでした。
    ぜひお教えください!

    1. 閲覧ありがとうございます。
      > #shadowに配置した画像は透過せずに
      > バックグラウンドのみ透過するにはどうすればいいでしょうか。
      上記の件ですが、どういったことでしょうか?
      とりあえず#shadowを透過したくないのでしたらopacityの値を1にすればよいかと思います。

      1. ご回答ありがとうございます。
        言葉足らずの質問すいませんでした。もう一度質問させてください。
        クリックと同時に暗転した#shadow(透過幕)の上に写真画像(alpha値はそのまま)を表示したいと(Lightboxのような)考えています。そしてサンプルのように、更にクリックで透過幕と画像を非表示にするというようなことなのですが。
        サンプルののなかにimg要素など入れると当然ですがimgも透過してしまいます。簡単な方法があればよいのですが。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です