javascript syntax with jQuery

Question

Possible Duplicate:
What do parentheses surrounding a JavaScript object/function/class declaration mean?
What does this JavaScript/jQuery syntax mean?

This is an open source jQuery popup library.

Somebody explain the code?

(function($){...})(jQuery);

for short ()();?

What's this syntax?

How do I call close_model outside the code?

Here is my usage:

$(function() {
    $("#leanModal").leanModal({top:200});
});

$(function(){...});//again what's this syntax?

Codes:

(function($) {

    $.fn.extend({

        leanModal: function(options) {

            var defaults = {
                top: 100,
                overlay: 0.5
            }

            options = $.extend(defaults, options);

            return this.each(function() {

                var o = options;

                $(this).click(function(e) {

                    var overlay = $("<div id='lean_overlay'></div>");

                    var modal_id = $(this).attr("href");

                    $("body").append(overlay);

                    $("#lean_overlay").click(function() {
                        close_modal(modal_id);
                    });

                    var modal_height = $(modal_id).outerHeight();
                    var modal_width = $(modal_id).outerWidth();

                    $('#lean_overlay').css({
                        'display': 'block',
                        opacity: 0
                    });

                    $('#lean_overlay').fadeTo(200, o.overlay);

                    $(modal_id).css({

                        'display': 'block',
                        'position': 'fixed',
                        'opacity': 0,
                        'z-index': 11000,
                        'left': 50 + '%',
                        'margin-left': -(modal_width / 2) + "px",
                        'top': o.top + "px"

                    });

                    $(modal_id).fadeTo(200, 1);

                    e.preventDefault();

                });

            });

            function close_modal(modal_id) {

                $("#lean_overlay").fadeOut(200);

                $(modal_id).css({
                    'display': 'none'
                });

            }

        }
    });

})(jQuery);

I'm confused about what you actually want to know. `$(function(){...});` is explained here: http://api.jquery.com/jQuery/#jQuery3 — Felix Kling, Oct 29 '11 at 09:31

Jibran · Answer 1 · 2011-10-29T09:40:55.310

3

The (function ($) {})(jQuery); is explained here:

Plugins/Authoring jQuery.com

in the "Getting Started" section. You should definitely give that a read if you want to understand jQuery plugin development.

As for your second query, close_modal is an private function that isn't accessible from outside of the closure. It's for the use of the plugin only. You can see in the leanModal function that it is called whenever the user clicks on the #lean_overlay item. If I understand the plugin correctly, you should have no need to call close_modal yourself.

edited Oct 29 '11 at 09:40

answered Oct 29 '11 at 09:33

Jibran

920
9
25

Thanks,I do little js coding and not familiar with leanModal,the effect I want is:When my ajax response ,I should close the previous popup form.And show up another popup telling success or error. – Vontio Oct 29 '11 at 10:55

javascript syntax with jQuery

1 Answers1