SimpleModal (jQuery) loses CSS formatting when called by Javascript

Question

I need to call a SimpleModal dialog from Javascript ...

I am referring to the downloadable "Confirm Override" demo on http://www.ericmmartin.com/projects/simplemodal-demos/

If I use ...

<input type='button' name='confirm' class='confirm' value='Demo'/>

... everything works fine. But if I use instead ...

<script type="text/javascript">
  $('#confirm').modal();
</script>

... the text content of the "confirm" DIV would show but without any CSS formatting.

What's wrong? Your help is highly appreciated.

----------------------- edited ------------------------------

Answering my own question ... thank you, Joe, for pointing me in the right direction ...

The original CSS contains definitions like this ...

#confirm {display:none;}

#confirm-overlay {background-color:#eee; cursor:wait;}

#confirm-container {height:140px; width:420px; ...}

Apparently #confirm-overlay and #confirm-container are only being used when SimpleModal is being called by the first method.

If I put all the formatting into #confirm it seems to work fine wit JavaScript:

#confirm {display:none; background-color:#eee; cursor:wait; height:140px; width:420px; ... }

Answer 1

Try

...
$('#confirm').addClass('confirm').modal();
...

Or just add in your CSS

#confirm{[style];}

so that you are styling the element by ID instead of relying on a class to be applied to it. Or, simply, apply the class in the HTML.