CODEWITHSUNDEEP
jqueryasp.netjquery-ui
Jim S
Jim S

Reputation: 1079

dialog won't close on background/overlay click

Many of my pages have dialogs that should be closed when the background (or overlay) is clicked -- i.e. when you click outside the dialog. I am doing this with this code

$(document).on('click', '.ui-widget-overlay', function(){
    $(".ui-dialog-titlebar-close").trigger('click');
});

which came from jQuery-UI close modal dialog on background click.

The code above is on the master page, and it works fine for every dialog I have tried except one. The ones that close correctly (i.e. when the background is clicked) are opened by invoking the following function (or something very similar) from the onclick event of a control on the page.

function LoadPopupWindowFixedWidthAndModal(path, width) {
    $("#DivPopup").dialog({ title: "Tip", width: width }).load(path);
}

The dialog that doesn't close is inside a user control placed on the master page, and is made into a dialog using this code

$(function () {
    $("#divFindResult").dialog({
        autoOpen: false,
        modal: false,
        resizable: false,
        width: 600,
        position: { my: "right top", at: "right bottom+6px", of: "#FindPopupPos" },
        open: function (type, data) { $(this).parent().appendTo("form:first"); }
    });
});

This dialog is associated with a find box and is actually opened by clicking on the find box, using this code

<asp:TextBox runat="server" ID="TextFind" Width="100" style="position:relative; z-index:100;" onclick="$('#divFindResult').dialog('open'); this.focus();" />

When I click on the find box the correct dialog comes up, but it can only be closed by clicking it's own close box. Clicking the background doesn't work. However, once this dialog is open, I can open one of the other dialogs, and then click on the background and they both will close.

Some things I have tried:

  1. Added 'open: function (type, data) { $(this).parent().appendTo("form:first"); }' because the dialog was outside of the form. This idea came from here: http://www.worldwidewhat.net/2011/06/fixing-asp-net-control-events-in-jquery-ui-dialog.
  2. keep jqueryui overlay in same DOM position
  3. jquery UI Modal Dialog in asp.net usercontrol: Modal Overlay only on Div in UserControl
  4. I read jQuery UI - Close Dialog When Clicked Outside, but decided it wouldn't help.
  5. Also reviewed a number of other articles.

I cannot figure out what differences between the two cases are relevant, although I have rejected a number of theories by testing different code tweaks.

One difference about the one that "won't close" is that the contents of the dialog are filled by server side code. That may be relevant, but at the moment I don't see how.

Another difference is being opened by the event from the text box. Again I don't see how that's relevant, and it's an important feature that has served us well. (All of this is coming about because I am converting old AjaxToolKit code to jQuery, so we can be consistent. Changing the behavior is not always an option.)

Another difference is being inside a user control and on the master page. Does that matter.

It also has some different parameters, does not use the load() function, and is opened by a separate call from its "creation," if that's the right word. As you can see, I am grasping at straws.

Can some one tell the the right straw or branch or trunk, I will be most grateful. Thank you in advance. Jim

Upvotes: 1

Views: 1583

Answers (2)

potatopeelings
potatopeelings

Reputation: 41065

There a probably 2 overlays - check the class of the overlay that comes up when you open the non-working dialog.

Opening up another of the working dialog brings up the overlay with .ui-widget-overlay to the top, and a click triggers both closes.

Upvotes: 0

codeandcloud
codeandcloud

Reputation: 55220

The click event on .ui-widget-overlay won't work cos there is no .ui-widget-overlaypresent in the DOM.

It is because you have specified modal: false. .ui-widget-overlay comes into play only when modal: true. That is, the overlay div is for modal dialogs.

Upvotes: 2

Related Questions