Question

I’m trying to use the dialog widget from JQueryUI and am running into a problem. The code is as follows:

<script type="text/javascript">
   // Set the document ready function...
   $(document).ready(function ()
   {
      // Create the Confirmation Dialog
      var $confDialog = $("#confDialog")
         .html('This is the confirmation dialog...')
         .dialog({ autoOpen: false, title: 'Email Success!', modal: true });

      // Create the Failure Dialog
      var $failDialog = $("failDialog")
         .html('This is the failure dialog...')
         .dialog({ autoOpen: false, title: 'Email Failed!', modal: true });


      $confDialog.dialog('open');
   });

</script>

If I include this code in the head of the page, the dialog will show as expected and be modal…

If I include this in an external javascript file and reference it like so:

<script src="/Scripts/Main/Contact.js" type="text/javascript"></script>

The dialog box will show up as expected, but it will not be modal… Not sure what the difference here is… Any help would be most appreciated… Thanks!!

Answer 1

It looks like your selector is failing here, causing issues when executed in a different context:

var $failDialog = $("failDialog")

It should be:

var $failDialog = $("#failDialog")

Though kudos on the variable/selector, the naming is dead-on, as it was failing 🙂