モーダルウィンドウってなに？
モーダルウィンドウとは、あるウィンドウの子ウィンドウとして表示し、ユーザーがそれに対して何かしらの応答をしない限り、親ウィンドウに戻さないというユーザーインターフェイスのひとつ。何かの注意事項や緊急のお知らせなどを通知する際によく使用されたりします。
1.「jquery.custombox.js」をダウンロード
jQuery Custombox v1.1.2より、「jquery.custombox.js」と「jquery.custombox.css」をダウンロードします。
2.JavaScriptとCSSを読み込む
jQuery本体(v1.7以上)、jquery.custombox.js、jquery.custombox.cssを</body>の直前に読み込みます。
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.custombox.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.custombox.css" /> |
3.JavaScriptプラグインを読み込む
<body>～</body>に読み込みます。
|
1 2 3 4 5 6 7 8 |
<script> $(function () { $('#element').on('click', function ( e ) { $.fn.custombox( this ); e.preventDefault(); }); }); </script> |
4.HTMLを記述
|
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 |
<div id="effectlist"> <h3>Effects List:エフェクト一覧</h3> <ul> <li><a href="#modal" class="list-group-item" id="fadein">Fadein</a><span class="eff_txt">(フェードイン)</span></li> <li><a href="#modal" class="list-group-item" id="slide">Slide <em style="font-size: 11px;">(Random position: top, right, bottom, left or center)</em></a><span class="eff_txt">(ランダムスライド)</span></li> <li><a href="#modal" class="list-group-item" id="newspaper">Newspaper</a><span class="eff_txt">(号外新聞!)</span></li> <li><a href="#modal" class="list-group-item" id="fall">Fall</a><span class="eff_txt">(ずーん！)</span></li> <li><a href="#modal" class="list-group-item" id="sidefall">Sidefall</a><span class="eff_txt">(斜め貼り付け)</span></li> <li><a href="#modal" class="list-group-item" id="blur">Blur</a><span class="eff_txt">(ブラー)</span></li> <li><a href="#modal" class="list-group-item" id="flip">Flip <em style="font-size: 11px;">(Random position: vertical or horizontal)</em></a><span class="eff_txt">(ランダムフリップ)</span></li> <li><a href="#modal" class="list-group-item" id="sign">Sign</a><span class="eff_txt">(サインボード)</span></li> <li><a href="#modal" class="list-group-item" id="superscaled">Superscaled</a><span class="eff_txt">(じゃーん！)</span></li> <li><a href="#modal" class="list-group-item" id="slit">Slit</a><span class="eff_txt">(狭いところからこんにちは)</span></li> <li><a href="#modal" class="list-group-item" id="rotate">Rotate <em style="font-size: 11px;">(Random position: bottom or left)</em></a><span class="eff_txt">(横から失礼!)</span></li> <li><a href="#modal" class="list-group-item" id="letmein">Letmein</a><span class="eff_txt">(トイレの窓)</span></li> <li><a href="#modal" class="list-group-item" id="makeway">Makeway</a><span class="eff_txt">(一旦CM)</span></li> <li><a href="#modal" class="list-group-item" id="slip">Slip</a><span class="eff_txt">(郵便で～す!)</span></li> </ul> </div> <div id="modal" style="display: none;" class="modal-example-content"> <div class="modal-example-header"> <button type="button" class="close" onclick="$.fn.custombox('close');">×</button> <h4>jQuery Customboxサンプル</h4> </div> <div class="modal-example-body"> <p>ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。ここに文章を記載します。</p> </div> </div> |
5.レイアウト用のCSSも読み込んでおきます。
|
1 |
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> |
以上になります。
様々なオプション設定が可能になっているプラグインですので、好みのスタイルを選んで遊んでみるといいかもしれません。
