モーダル表示にも色々ありますが、今回はanimatedModal.jsを使ってモーダル画面をアニメーション演出で表示する方法をご紹介します。
Contents
ディスプレイ広告
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するCSS記述
※animate.min.cssファイルを読み込みます。モーダルエリアの閉じるボタン(#btn-close-modal)のCSS記述です。その他、必要に応じて変更して下さい。
<link rel="stylesheet" href="animate.min.css"> <style> * { padding: 0; margin: 0; } body { font-size: 18px; text-align: center; } h1{ text-align: center; font-size: 24px; padding: 20px 0 40px 0; } #btn-close-modal { width:100%; text-align: center; cursor:pointer; color:#fff; text-decoration: underline; padding: 20px 0 40px 0; } </style>
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するHTML記述
※モーダル表示リンク(id=”demo01″、id=”demo02″)とモーダルエリア(id=”demo1-modal”、id=”demo2-modal”)を用意します。モーダル表示リンクタグのhref(href=”#demo1-modal”、href=”#demo2-modal”)と表示するモーダルエリアのid(id=”demo1-modal”、id=”demo2-modal”)を一致させる必要があります。その他、必要に応じて変更して下さい。
<h1>animatedModal.jsを使ってモーダル画面をアニメーション演出で表示</h1> <div><a id="demo01" href="#demo1-modal">ココをクリックするとモーダル1を表示</a></div> <br> <div><a id="demo02" href="#demo2-modal">ココをクリックするとモーダル2を表示</a></div> <div id="demo1-modal"> <div id="btn-close-modal" class="close-demo1-modal"> ココをクリックするとモーダル1をCLOSE </div> <div class="modal-content"> モーダル1のコンテンツエリアです。 </div> </div> <div id="demo2-modal"> <div id="btn-close-modal" class="close-demo2-modal"> ココをクリックするとモーダル2をCLOSE </div> <div class="modal-content"> モーダル2のコンテンツエリアです。 </div> </div>
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するJavaScriptの記述
※jquery-3.4.1.min.jsファイルを読み込みます。$(“モーダルエリアid”).animatedModal(オプション)を指定します。オプションではモーダル画面の表示演出方法やモーダル表示前後とCLOSE前後の処理を設定出来ます。
<script src="jquery-3.4.1.min.js"></script> <script src="animatedModal.js"></script> <script> $("#demo01").animatedModal(); $("#demo02").animatedModal({ animatedIn:'lightSpeedIn', animatedOut:'bounceOutDown', color:'#3498db', //以下にモーダル表示前後とCLOSE前後の処理を記述 beforeOpen: function() { }, afterOpen: function() { }, beforeClose: function() { }, afterClose: function() { } }); </script>
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するデモページ
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するデモページ
ソース元:animatedModal.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。