【jQuery】CSS3とjQueryでフルスクリーンモーダルanimatedModal.js

CSS3トランジションとjQueryでフルスクリーンモーダルを実装するjQueryプラグイン。
オプションでanimatedIn,animatedOut,animationDurationなども設定できるみたいです。

CSS

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

HTMLマークアップ

<body>
<!--Call your modal-->
<a id="demo01" href="#animatedModal">DEMO01</a>
<!--DEMO01-->
<div id="animatedModal">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
<div class="close-animatedModal"> 
CLOSE MODAL
</div>
<div class="modal-content">
<!--Your modal content goes here-->
</div>
</div>
</body>

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="yourPath/animatedModal.min.js"></script>

オプション

<script>
$("#demo01").animatedModal();
</script>
modalTarget ターゲット
color 背景色
animatedIn モーダルイン
animatedOut モーダルアウト
animationDuration アニメーションの時間
overflow スクロール可能かどうか
 
animatedModal

【jQuery】CSS3とjQueryでフルスクリーンモーダルanimatedModal.js

  • LATEST
  • RELATED
  • POPULAR