Question

I using this jquery script to open a dialog on my page. I have a totla of 8 dialog options.

      $(".details").dialog({
        autoOpen:false
      });

      $("a.pop").each(function(i,o){
        $(this).click(function(e){
          e.preventDefault();
          $(".details:eq("+i+")").dialog('open');    
        });
      });

    });

Here is the HTML:

<a class="pop" href="#"><img src="icon.png" width="16" height="16" border="0" /></a><div class="details" title="Name Help">Name</div>
<a class="pop" href="#"><img src="icon.png" width="16" height="16" border="0" /></a><div class="details" title="Address Help">Address</div>

however after the user opens a dialog, then tries to open the next dialog, all the dialogs will stay on the screen. When a user opens a dialog, it should stay open until they eihter close the dialog or they select a new dialog.
I tried to implement this (from the jquery info page )

$( ".selector" ).dialog({
close: function(event, ui) { ... }
});

But this does not close the dialog. appreciate any assistance in getting pointed in the right direction!

Answer 1

Add $(".ui-dialog-content").dialog("close"); to your click event code. Since all jQueryUI dialogs share the ui-dialog-content class, you can close them all first, before any new ones open.

See this jsFiddle.