animatedModal.js

Posted by: Dahe Ugi 5/27/2017

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	ChooseHere	Transition when the modal goes in
animatedOut	zoomOut	ChooseHere	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

Blogs Tutorial

CSS

Javascript

JQuery

0 komentar:

Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau URL_Gambar
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau URL_Video
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau Kutipan_Anda
Untuk menyisipkan Kode: [code]KODE[/code]
atau KODE
atau KODE
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon