参照:https://joaopereirawd.github.io/animatedModal.js/https://joaopereirawd.github.io/animatedModal.js/
close_btn.svg
animate.min.css
animated.min.js
<!--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 <img src="close_btn.svg" alt"close">
</div>
<div class="modal-content">
<!--Your modal content goes here ここにモーダルで表示するコンテンツを入れる-->
</div>
</div>
//modalを動かすためのスクリプト
$("#demo01").animatedModal();
//↓オプションアレンジver.
//MODAL//
$("#demo01").animatedModal({
color:'#eb5254',
animatedIn:'rubberBand',
animatedOut:'bounceOutDown',
animationDuration:'1.2s',
});