今回は、web初心者向けにボタンをクリックすると背景が黒く半透明にオーバーレイされるjQueryを実装します。
よく画像のスライドショーとかに使われるlightboxのような表示されるあれです。
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
|
1 2 3 4 5 6 7 8 |
$(function() { $("#button").click(function() { $("#contents").fadeIn(); /*表示する*/ }); $("#close").click(function() { $("#contents").fadeOut(); /*表示が消える*/ }); }); |
＃buttonのボタンをクリックしたら、＃contentsが表示される。
＃closeのボタンをクリックしたら、＃contentsが消える
HTMLを設置します STEP3
|
1 2 3 4 5 6 |
<div id="contents"> <p id="text">表示されたかな？</p> <p id="close">閉じる</p> </div> <div id="button">ボタンを押してね♪</div> |
CSSを記述します STEP4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<style type="text/css"> #button{ background: #717171; color: #eeeeee; display:block; margin: 400px auto; width: 70px; text-align: center; font-size: 15px; padding:5px 0; border-radius: 3px; cursor: pointer; } #contents{ display: none; width: 100%; height:100%; text-align: center; position: fixed; top: 0; z-index: 100; background-color: #666; } #text{ font-size: 40px; color: #fff; padding-top: 150px; vertical-align: middle; font-weight: bold; } #close{ background-color: #FFF; width: 70px; margin: auto; text-align: center; font-size: 15px; padding:5px 0 5px 0; border-radius: 3px; cursor: pointer; border:#FFF; } </style> |
表示がわかりやすくするために、CSSをつけました。
まとめ
[サンプル] クリックをするとオーバーレイさせる方法｜jQuery
よくわからなかった人もいるかもしれませんが、このサンプルのソースを全部コピーしても使えます。
ちょこっとしたギミックに使えそうですね。
※firefox、クローム、IEで動いていることを確認しております。
