So, I'm creating a plugin to show some modals, I'm creating animations to the modal open and close action, when I Tried to insert some jQuery UI easing the animations just don't happen... Here is my code, what do you think:
$.fn.modal = function(a, c){
var object = function(){
if( typeof(a) === "object" ){
return a;
}
}
var settings = $.extend({
title: "Atenção",
action: "open",
type: "login",
width: "small"
}, object() );
var div = $('<div id="modal"><div class="modal-cont odd-correction ' + settings.width + '"><div class="head">' + settings.title + '</div><div class="body"><div class="body-cont"></div></div></div></div>'),
divCont = div.find(".modal-cont"),
divBody = divCont.find(".body"),
divBodyCont = divBody.find(".body-cont"),
divHead = divCont.find(".head");
function returnCallBack(c){
if( typeof(c) === "function" ){
return c();
}
}
function modalContent(){
var data;
$.get( "modal/" + settings.type, function(r){
data = r;
}).complete(function(){
console.log(data);
divBodyCont.html(data);
divBodyCont.slideDown("easeInOutQuart", function(){
$(this).animate("easeInOutQuart", {opacity: 1});
});
});
}
function openModal(c){
$("body").prepend(div);
div.animate("easeInOutQuart", {
opacity: 1
}, function(){
divCont.animate("easeInOutQuart", {opacity: 1}, function(){
modalContent();
});
});
returnCallBack(c);
}
function closeModal(c){
alert("close");
returnCallBack(c);
}
this.on("click", function(e){
e.preventDefault()
if( typeof(a) === "function" ){
openModal(a);
} else{
openModal(c);
}
});
return this;
};
$("#register-trigger").modal({
title: "Cadastre-se",
width: "big"
});
Here is a fiddle: http://jsfiddle.net/k9s632xq/