jQuery-ui Dialog - has all these ghost DIVs inserted in my page

in my app I use several different dialog boxes, which are all contained in my base JS file. This has ended up creating several hidden DIVs on every page. Which seems like a waste, performance hit etc... Why does jQuery UI dialog create these DIVs, and how can you make it so they only appear when you actually call to render the dialog?

These are what I have at the bottom of my page, several of them:

<div style="display: none; z-index: 1000; outline-width: 0px; outline-style: initial; outline-color: initial; " class="ui-dialog ui-widget ui-widget-content ui-corner-all dialog" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog-sssss">...........

The Code I'm using for my dialogs: (1 Dialog in particular):

 permissions = $('<div id="dialog-content"></div>')
.html('<div class="notification"><h4>开发者_StackOverflow社区;Loading...</h4></div>')
.dialog({
    autoOpen: false,
    dialogClass: 'dialog',
    width: 460,
    minHeight: 80,
    position: ['center',130],
    open: function() {
        $.ajax({.......})
    },
    close: function() {
        // Remove out the Dialog so it show's loading... nex time
        $('#dialog-content').html('<div class="notification"><h4>Loading...</h4></div>');
    }       
});
$(".teammember-dialog").live("click",function(){
    permissions.dialog('open');
    return false;
});

Any ideas? or Thoughts?

Thank you

Don't know if this is technically an "answer", but since you asked for thoughts...

As it seems you've figured out, the "ghost divs" are the divs that jQueryUI will use to create the actual dialog boxes.

As to whether or not creating all of the dialogs beforehand is a "waste" or a "performance hit", I'd say it sounds like you're worrying prematurely about optimization. I don't claim to know how many people are using jQuery dialogs, but given the popularity of the library, I'd say it's a significant enough number that if there -were- performance issues, we'd have heard about it.

I understand and respect the desire to build a site or application that is as performant as possible, but there's always a "happy medium" between acceptable performance and maintainable code.

I don't know why jQuery creates the divs beforehand, nor do I know how much of a "hit" that results in. I suppose that creating the divs at "runtime" (as each div is requested) might result in the user seeing a noticeable enough lag between the time they trigger the dialog and the time it appears?

I suppose when all is said and done, I'd simply ask whether or not you're seeing any performance issues with the page. Is it loading -noticeably- slower than it was before implementing the dialogs? If it is, and if you really want to delve into the "whys", I'd probably suggest contacting the fine folks over at jQueryUI. Provide them with some code and see if they think there's a justification to try and refactor the code to squeeze some more performance out of it.