mk-webwork codenote

参照: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',
  });


	
← もどる