Question

So, the test site is up at http://kinnill.com/dev/eisatech and this is going to sound extremely awkward, but there are two separate modal dialog windows that open from the “About” and “Contact” links. The “About” dialog opens and closes perfectly fine, but the “Contact” dialog only loads the modal overlay if “About” hasn’t loaded. I have looked at the site in firebug, and it seems that if you try to load the “Contact” dialog second, the .ui-overlay div is never created.

The javascript call is:

<script type="text/javascript">
$(function() {

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 420,
        width: 661,
        modal: true
    });

    $( ".contact" )
        .click(function() {
            $( "#dialog-form" ).dialog( "open" );
        });

    $( "#dialog-about" ).dialog({
        autoOpen: false,
        height: 420,
        width: 661,
        modal: true
    });

    $( ".about" )
        .click(function() {
            $( "#dialog-about" ).dialog( "open" );
        }); 

    $(".contact")
        .click(function() {
            $("#dialog-about").dialog("close");
        });

});
</script>

#dialog-form is the “Contact” dialog, and #dialog-about is the “About” dialog. The extra ‘close’ call is because there is a link in the About dialog to open the Contact dialog.

Answer 1

I will suggest a better way for creating and closing jquery dialogs. Even me I had the same problems when using more dialogs at the same page but I definitively resolved this way:

$( ".about" ).click(function() {
 $("<div />").dialog({
  open: function()
  {
    $(this).html( $( "#dialog-about" ).html());
  },
  height: 420,
  width: 661,
  modal: true,
  close:function()
  {
    $(this).dialog('destroy').remove();
  }
 });
}); 

$( ".contact" ).click(function() {
 $("<div />").dialog({
  open: function()
  {
    $(this).html( $( "#dialog-form" ).html());
  },
  height: 420,
  width: 661,
  modal: true,
  close:function()
  {
    $(this).dialog('destroy').remove();
  }
 });
});

Just create the dialogs on the fly and when you close them get remove totally without conflicts.