Hi All

I've been learning jQuery for the last while now and really love it. I've written a few simple scripts, and I'm now trying to learn how to make them into plugins so I can re-use them in different projects.

I made a modal window script, which I'm trying to make into a plugin so I can pass different 'triggers' and 'modal contents' to it. However, the close function doesn't work anymore now. Can anyone see what the problem is? Pretty sure it's something simple I'm missing.

         

          
<script type="text/javascript">
          
(function($){
          
$.fn.extend({
          
    mynewmodal: function(options) {
          
   var defaults = {
          
                   container: "#modalcontainer"
          
          };
          
        var options = $.extend(defaults, options);
          
        return this.each(function() {
          
            var o =options;
          
            // Add our click OPEN event
          
            $(this).click(function (e) {
          
                e.preventDefault();
          
                // Add our overlay div
          
                $('body').append('<div id="overlay" />');
          
                // Fade in overlay
          
                $('#overlay').css({"display":"block","opacity":"0"}).animate({"opacity":"0.2"}, 300),
          
                // Animate our modal window into view
          
                $(o.container).css({"top":"43%"}).pause(200).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 550),
          
                // Add our close image
          
                $(o.container).append('<div id="modal-vid-close" title="Close window" />');
          
                // Add our click CLOSE event
          
                $('#overlay', '#modal-vid-close').click(function () {
          
                    //Animate our modal window out of view
          
                    $(o.container).animate({"top": "55%", "opacity": "0"}, 350).fadeOut(200),
          
                    // Fade out and remove our overlay 
          
                    $('#overlay').pause(500).fadeOut(200, function () { $(this).remove(); $('#modal-vid-close').remove()} )
          
                });
          
            });
          
        });
          
    }
          
});
          
})(jQuery);
          
</script>
         

and then the options being passed on the page:



         

          
<script type="text/javascript">
          
var $j = jQuery.noConflict();
          
$j(document).ready( function() {
          
$j('.video_container a').mynewmodal({ container: "#video" });
          
});
          
</script>