animatedModal.jsを使ってモーダル画面をアニメーション演出で表示する方法｜DAD UNION

モーダル表示にも色々ありますが、今回はanimatedModal.jsを使ってモーダル画面をアニメーション演出で表示する方法をご紹介します。

Contents

animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するCSS記述
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するHTML記述
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するJavaScriptの記述
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示するデモページ
ソース元：animatedModal.js

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>