AnimatedModal.js adalah plugin jQuery untuk membuat modal layar penuh dengan transisi CSS3.

Anda dapat menggunakan transisi dari animate.css atau membuat transisi Anda sendiri.

DOWNLOAD VERSION 1.0

DEMO 01

animatedIn: 'zoomIn',

animatedOut: 'bounceOut'

DEMO 02

animatedIn: lightSpeedIn

animatedOut: bounceOutDown

DEMO 03

animatedIn: bounceIn

animatedOut: bounceOut

1. Sertakan Animate.css di dalam tag <head>


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

2. Sertakan contoh syntax berikut ini dalam tag <body>


<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>

3. Sertakan Libraries berikut di bagian bawah tag </ body>


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

4. Inisialisasi Dasar


<script>
  $("#demo01").animatedModal();
</script>

Options

Variable	Default Value	Options	Description
modalTarget	animatedModal		Customize your target
color	#39BEB9	HEX, HSL, RGB, RBA	Define background color
animatedIn	zoomIn	Choose Here	Transition when the modal goes in
animatedOut	zoomOut	Choose Here	Transition when the modal goes out
animationDuration	.6s	seconds	Animation duration
overflow	auto	scroll; hidden; auto;	This makes your modal scrollable or not

5. Contoh Implementasi


        <script>

            //demo 02
            $("#demo02").animatedModal({
                modalTarget:'modal-02',
                animatedIn:'lightSpeedIn',
                animatedOut:'bounceOutDown',
                color:'#3498db',
                // Callbacks
                beforeOpen: function() {
                    console.log("The animation was called");
                },           
                afterOpen: function() {
                    console.log("The animation is completed");
                }, 
                beforeClose: function() {
                    console.log("The animation was called");
                }, 
                afterClose: function() {
                    console.log("The animation is completed");
                }
            });

        </script>

sumber: joaopereirawd

animatedModal.js

DEMO 01

DEMO 02

DEMO 03