I was trying to create my own Full page modal and I got success in that but now I want to add a animation to it... am using animate.css to achieve this task but the animation is not working only when add a zoomIn or zoomOut animation class
here is JSFiddel what I tried... any help be appreciated...
My Html
<div class="am-modal" id="examples-modal">
<a href="javascript:void(0);" class="am-colse"> Back</a>
<div class="head">
Trying Modal with zoonIn and out effect
</div>
</div>
<a href="javascript:void(0)" class="am-modal-trigger" data-am-target="#examples-modal">Modal Trigger</a>
Css
.am-modal {
display: none;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: #2c3e50;
padding : 20px;
}
.am-modal a{
float : float;
}
.head{
margin-top : 40px;
font-size : 25px;
color : #fff;
text-align : center;
}
Jquery
$(document).ready(function(e) {
resizeDiv();
window.onresize = function(event) {
resizeDiv();
}
function resizeDiv() {
vpw = $(window).width();
vph = $(window).height();
$('.am-modal').css('height', vph + "px");
}
$('.am-modal-trigger').on('click', function() {
var target = $(this).data('am-target');
$(target).css('display','block');
$(target).addClass('zoomIn');
});
$('.am-colse').on('click', function() {
$(this).parent().removeClass('zoomIn').addClass('zoomOut');
$(this).parent().css('display','none');
});
});
jsfiddle You need to add class "animated"
<div class="am-modal animated" id="examples-modal">
Trying Modal with zoonIn and out effect
When you add the zoomIn class to your modal are you being sure to add the animated
class? This worked on the JSFiddel you provided:
<div class="am-modal animated zoomIn" id="examples-modal">
<a href="javascript:void(0);" class="am-colse"> Back</a>
<div class="head">
Trying Modal with zoonIn and out effect
</div>
</div>
Let me know if this works for you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.