I'd like to create a customizable jQuery modal that is animated in and out (css color changes + fade in and out) that is triggered by a click on the main html page. I know how to pass option variables into a jquery plugin, but I am not sure how to animate within the plugin. Eg: with inline jquery you can just say:
<script>
$("#modal").animate({color: 'red', width: 300}).fadeIn('fast');
</script>
How would I be able to make these same changes within a plugin? Here is a chunk of the code (was trying to use Jeff Ways' jQuery plugin tutorial:
var mybigmodal= {
init: function( options, elem) {
var self = this;
self.elem = elem;
self.$elem = $( elem );
if ( typeof options === 'string') {
var w = 400;
var h = 600;
} else {
//object was passed
self.options = $.extend( {}, $.fn.mymodal.options, options)
}
self.mshow();
},
mshow: function() { //show the modal via animation?
$('#lightbox-pane').fadeIn(50).animate({
width: 50}, 150).animate({
width: 100},200);
}
};
});
I don't need someone to code this for me, I just would like to know what I'm doing wrong in order to make these same animations happen that are so simple while inline..
I'd really like to enable the user to be able to use options like custom width or color as well.
(I know this maybe a noob basic question, but any help would be appreciated!)
You can try something like this inside your plugin code:
First extend your plugin options as
var options = $.extend({
height : "250",
width : "500",
color: "red",
title:"Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "35%",
},prop);
$('#modal').animate({top:'toggle'},80);