0

Imagine a fairly standard web app page using jQuery and Knockout which uses mostly modal dialogs for editing data. The modal dialogs are created via jQuery UI and everything works. As the page loads, the JS runs, the dialogs open when the button is clicked, do their job, all is fine, great, and peachy.

However, as the page is loading, the elements in the divs containing the HTML for the modal controls will flash just for a second before the script to turn them into dialogs completes, after which they're once again hidden until the dialog is opened. And yes, this will happen even when the script has been wrapped in the $(document).ready() call since all that does is prevent manipulation until the DOM has been loaded.

One method which seems to make this go away is to add visibility: hidden; to the CSS of the class which I assign to my modal divs which stops the elements form appearing on page load but it also then turns those elements inside the modal control invisible and I have to add the following line to the function which opens it...

$modal.css('visibility', 'visible');

Again, all this seems to work, but I'm wondering if anyone knows a better way to effectively hide all of the inputs and dropdowns, and text inside what will become a modal control on page load than by playing with the CSS when the dialog opens.

gfish3000
  • 1,557
  • 1
  • 11
  • 22
  • 1
    Since the dialog show will likely change the visibility (i.e. display css), it is a useful idea to simply have `#modal {display:none}` in your css - her more http://stackoverflow.com/questions/2513051/when-creating-a-dialog-with-jquery-how-do-i-hide-the-dialog-div – mplungjan Sep 08 '14 at 18:31
  • What about using just CSS and setting `display: none` for all of the dialogs that need to be hidden? – DRD Sep 08 '14 at 18:31

1 Answers1

0

Add a class called hidden to your css file.

.hidden{
   display: none;
}

This will allow you to reuse this class on other elements. If your using twitter bootstrap this class should be available: http://getbootstrap.com/css/#helper-classes-show-hide

Tim
  • 785
  • 1
  • 7
  • 20
  • I didn't want to use `display: none` because of the potential for extra space at the bottom on the page. But it doesn't seem to show up when the page loads now that I test it, so I guess I just wasn't as thorough as I should have been in testing with jQuery UI. I already had a class for all my modal controls to help set the styling and margins for all the elements, so I just added it there. – gfish3000 Sep 08 '14 at 18:38