JQuery dialog momentairly displayed on page load

Question

I created a page that has a JQuery based dialog using the standard JQuery UI function. I do this with out of the box functionality of JQuery... nothing special at all. Here

Answer 1

You can add some CSS so it's by default hidden, no onload code needed:

#myDialog { display: none; }

With this, no other code is necessary, when you open the dialog it'll reverse this style...so nothing additional to run on document.ready. Alternatively, if you have lots of dialogs, give it a class, like this:

<div id="myDialog" class="dialog"></div>

With this CSS:

.dialog { display: none; }

In almost all cases, jQuery uses the display style attribute to hide things, so using this to initially hide something will work with whatever you want to use the element for later, whether it's a dialog, a simple .fadeIn(), etc.

Answer 2

I use CSS3 selectors with a bit of naming & tag convention. All my dialogs are <div> elements, and the id always ends with "dialog". I then use this CSS:

div[id$=dialog] { display: none; }

A sample dialog:

<div id="my-sample-dialog" title="Sample Dialog">
      <span>I'm invisible!</span>
</div>

In case CSS3 is not an option, you can use CSS2 to achieve the same result, but you have to be more careful not to use the dialog moniker in any <div> id not intended to be hidden:

div[id~=dialog] { display: none; }

and set your dialog id to something like "my sample dialog"

Answer 3

I came up with a resolution to this problem which works OK, but I'm wondering if someone knows of a better way.

The problem is that the browser renders the DOM as it loads it, then fires the JQuery .js at the end which hides it. So what I'm doing is turning the visibility off in a parent <div> tag so all the dialog content is hidden by default, then turning that parent <div> tag in .js.

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog">
        <!-- ... more html in here for the dialog -->
    </div>
</div>

then the JQuery .js:

<script type="text/javascript">

$(document).ready(function() {
    //turn the visibility on last thing
    $("#bodyDiv").attr("style", "visibility:visible");
});
</script>

as you can see, I just by default turn off the visibility of everything so the page renders w/o displaying the dialog contents, then I turn the visibility on again. This is not a perfect solution because it can still make the page act funny for a second but at least the dialog HTML isn't displayed in-line. The UX with this fix is acceptable, though not ideal.

Answer 4

If you're using a "popup" rather than a "dialog" I had to do the following:

HTML

<div data-role="popup" class="popup">
  <!-- CONTENT -->
</div>

CSS

.popup { display:none; }
.ui-popup-container .popup { display:block; }

I initially hide the popup using display:none and after jQueryUI wraps the popup in a container, the other style takes precedence.