Jquery UI dialog window non modal view clicking outside to close it

Question

I am running into some issues where I am unable to click outside the overlay to close it. I was wondering if anybody has any suggestions. This is a non-modal dialog.

$b("#rl_cover").click(function() {
    var overlayWidth = getWidth();

    var overlay = $b( "#rl_resize" ).dialog({
        width:overlayWidth,
        minWidth:962,
        height: 700,

        resizable:true,
        position: {
            my: "center top",
            at: "center top",
            of: "#bl_main_wrapper",
            collision: "none"
        }   
    });

});

$b("#closex").click("rl_resize", function( event, ui ){
    $b("#rl_resize").dialog( "close" );
});

Please advise.

In addition to that I was trying to add a function to detect when I click in the document but that was doing weird things like showing the alert when I didn't click anywhere.

$b(document).click(function(e){
    alert('lk');
    closeme(e);
});

Answer 1

I think you can use this idea:

How do I detect a click outside an element?

You need to attach a click event to the html:

$("html").on("click", function() {
    // Perhaps detect if dialog is open. Less expensive than close.
    $("#rl_resize").dialog("close");
});

Then you dialog needs:

$("#rl_resize").click(function(e) {
    e.stopPropagation();
});

So this should allow all click events to bubble through your html except those that are part if on your dialog.

You could make your dialog modal. As you close it when you click off this should work:

$(".ui-widget-overlay").on("click", function() {
    $("#rl_resize").dialog("close");
});