Dialog close button triggers click on item behind it.

Dialog close button triggers click on item behind it.

I have a dialog box (not a popup) with some fields and two buttons styled like so:

            <a data-role="button" data-inline="true" data-transition="none" href="#"
                data-icon="check" data-iconpos="left" id="saveEdit">Save
            </a>
            <a data-role="button" data-inline="true" data-transition="none" href="#"
                data-icon="delete" data-iconpos="left" id="closeEdit">Cancel
            </a>

When one of them is clicked, a click event handler closes the dialog:

  1.         $(document).on("vclick", "#saveEdit", function () {

  2.             LoginCookie(EditDoc, "Y");
  3.             $('.ui-dialog').dialog('close');
  4.         });


 However, when this happens, a click event is also fired on anything that was "behind" the dialog, almost as if you are tapping "through" the dialog button, even though it still fires a click event on the button. Is there a way to prevent this behavior?