Anda dapat menggunakan transisi dari animate.css atau membuat transisi Anda sendiri.
DOWNLOAD VERSION 1.0
DEMO 01
DEMO 02
DEMO 03
animatedIn: 'zoomIn',
animatedOut: 'bounceOut'
animatedIn: lightSpeedIn
animatedOut: bounceOutDown
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>
Post A Comment:
0 comments: