Flush jqModal popup content on popup close

I'm using jqModal pop up windows, two different pop ups are used which are triggered from different sections of code. Both pop ups are triggered smoothly but when i close a pop-up and open another, overlay window populates contents of both pop ups. I'm using jqmHide() to close the popup. Is there a way to flush the pop up content when i close it?

$('a.jqModal').click(function(event){
        event.stopPropagation();
        $( $(this).attr('href') )
            .jqm({ modal:true, overlay:80, toTop: true })
            .jqmShow();

        return false;
    });

    $(".jqm").click(function () {
        $("#Dv_AddProfile").jqmHide();
        $("#Dv_DuplicateProfile").jqmHide();
    });

Html:

<div id="Dv_AddProfile" class="jqmWindow">
   <span id="Spn_Close" class="jqm"><button>Close</button></span>
   //...
   //popup content

</div>
<div id="Dv_DuplicateProfile" class="jqmWindow">
   <span id="Spn_Close" class="jqm"><button>Close</button></span>
   //...
   /// popup content
</div>

Solution

this code looks a bit strange. Initialize your modals once via;

$('div.jqmWindow').jqm({
  modal:true, 
  overlay:80, 
  toTop: true, 
  trigger: False
});

I set trigger to false, because I noticed that you're manually triggering the modals. The default looks for anchor elements with a class of "jqModal".

You didn't include the anchor elements in your HTML example, but I assume they look like:

<a href="#Dv_AddProfile" class="jqModal">Open AddProfile Modal</a>
<a href="#Dv_DuplicateProfile" class="jqModal">Open DuplicateProfile Modal</a>

Then, you can trigger the modals similarly without the need for event.stopProgogation() ; e.g.

$('a.jqModal').click(function(){
  $( $(this).attr('href') ).jqmShow();
    return false;
});

Now, lets take advantage of the default closeClass behavior. This way you don't need the $(".jqm").click() function to close your modals.

Change the jqm class of the closing span elements to "jqmClose", e.g.

<div id="Dv_DuplicateProfile" class="jqmWindow">
  <span id="Spn_Close" class="jqmClose"><button>Close</button></span>
  //...
  /// popup content
</div>

NOTE: you may need to move the jqmClose class to the button element for the click event to fire; e.g.

<span id="Spn_Close"><button class="jqmClose">Close</button></span>

FINALLY; if you want to clear the content of a modal on hide, do so via a custom onHide callback. I run into this problem often (e.g. to stop a video playing w/o having to worry about a javascript api into the plugin).

Something like

onHide: function(hash){
  // hide modal
  hash.w.hide();

  // clear content
  $('div.cleared-on-close',hash.w).empty();

  // remove overlay
  hash.o.remove();
}

So here's your modified example;

Markup

<a href="#Dv_AddProfile" class="jqModal">Open AddProfile Modal</a>
<a href="#Dv_DuplicateProfile" class="jqModal">Open DuplicateProfile Modal</a>

<div id="Dv_AddProfile" class="jqmWindow">
   <span id="Spn_Close"><button class="jqmClose">Close</button></span>
   <div class="cleared-on-close">...</div>
   ...
</div>
<div id="Dv_DuplicateProfile" class="jqmWindow">
   <span id="Spn_Close"><button class="jqmClose">Close</button></span>
   <div class="cleared-on-close">...</div>
   ...
</div>

Javascript

$('div.jqmWindow').jqm({
  modal:true, 
  overlay:80, 
  toTop: true, 
  trigger: False,
  onHide: function(hash){
    // hide modal
    hash.w.hide();

    // clear content
    $('div.cleared-on-close',hash.w).empty();

    // remove overlay
    hash.o.remove();
  }
});

$('a.jqModal').click(function(){
  $( $(this).attr('href') ).jqmShow();
  return false;
});

Hope this helps!