How can i improve my personnal jQuery Dialog plugin

Question

I've been coding my own dialog system for exercising and to be able to customize it as i want. Here is what i've done.

$(function(){
    $.fn.window = function(attr){
    var $self = this;

    if(!attr)
        attr = {};

    $.extend({
        autoOpen:false
    }, attr);

    /**
     * Create the window by updating the current jQuery block
     * And adding the required classes
     */
    this.create= function(){
        // Already created
        if($self.hasClass('window-window'))
            return;

        $self.addClass('window-window');

        // Creating the header and appending the title
        var $windowHeader = $('<div class="window-header"></div>');
        var $title = $self.attr('title');

        $windowHeader.html($title);
        $windowHeader.append('<div class="loading-item loading-item-footer round-loading25" ' +
            'data-loading-item="window" style="display:none"></div>');

        // Wrapping content in a window-content class
        // So the window has the proper format
        $self.children().wrapAll('<div class="window-content"></div>');
        $self.prepend($windowHeader);
    };

    /**
     * Open the window in a blackish div
     * With the events to close it
     */
    this.open = function(){
        // Creating the background
        var $backgroundDiv = $('<div></div>');
        $backgroundDiv.addClass('window-background');

        // Making it take the size of the page
        $backgroundDiv.height($(window).height());
        $backgroundDiv.width($(window).width());

        $self.detach().appendTo($backgroundDiv);

        // The window is hidden by default, showing it
        $self.show();

        $('html').prepend($backgroundDiv);

        // Handling closing the window
        $backgroundDiv.click(function(e){
            var $target = $(e.target);
            if(!$target.hasClass('window-background'))
                return;

            $self.hide();
            $self.detach().appendTo('html');

            $backgroundDiv.remove();
        });
    };

    this.create();

    if(attr.autoOpen){
        this.open();
    }
};
});

For now i have doubt about the fact that i'm putting the window out of his native block, in the end of the html document. I wish to put it back to his position but i have no idea yet how to do it. Any idea ?

Answer 1

First of all, you create a jQuery function, but you do it on document.ready $(...) . You should just create it, otherwise the function will not be available for other code until document has loaded.

Then you want to insert the window in the same place as the original element, for that you have insertBefore and insertAfter in jQuery. You use prepend, but that inserts it as the first element of $self.

I would urge you to look at the method chaining of jQuery which may make your code much more readable. Instead of:

// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');

// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());

use

// Creating the background
var $backgroundDiv = $('<div></div>')
  .addClass('window-background')
  // Making it take the size of the page
  .css({
          height:$(window).height(),
          width:$(window).width()
  });

for example.

You also use CSS classes to store information, like if something had been clicked or not. That may be OK, but consider that you may want change the CSS classes and suddenly the functionality of your code is strongly linked to the design. Maybe using .data() instead would be better, even if you add more code to also style your elements.

You use .wrap to take the original content and put it in the window. That may be what you wanted all along, but also take a look at https://api.jquery.com/clone/ which allows you to get the elements without removing them from their original source. Again, only if it works better for you.

As a last advice, use http://jsfiddle.net to share your working code, so other people may not only comment on it, but see it in action as well.