close jquery ui dialog when clicked out side the dialog box

Question

I knew there are some links already exists related to this topic, but my problem isn't solved. so i've created a new one.
First, i need to close a pure jquery ui dialog when it's clicked outside the dialog box. so first i created dialog box with this code:

<div id="login_panel" align=center style="display:none;">
    <div id="add_predicts_popup1">
        <div id="login_msg" align=center class="messagebox" style="display: none; width: 593px;height: 18px;" ></div>
        <form name="log_form" id="log_form" method="get">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr><td><h1>Enter Your Username and Password</h1></td><br></tr>
            <tr><td><input name="txtuser" type="text" class="textpart" id="txtuser" onclick="closeMsg('login_msg')"/></td>
            <td>&nbsp;</td>
            </tr>
            <tr><td><input name="txtpass" type="password" class="textpart" id="txtpass" />&nbsp;&nbsp;</td>
            <td><input name="btnlog" type="button"  class="predict_button2" id="btnlog" value=" " /></td>
            </tr>
            <tr>
            <td class="add_predicts_popup-style_01"><a href="#" onclick="register('register')">Register Now</a> l   <a href="#" onclick="register('forgot')">Forget Password?</a></td>
            </tr>
            </table>
        </form>
    </div>
</div>

to show the dialog box i used,

<script type='text/javascript'>
$('#log').click(function(){
        $('#add_predicts_popup1').dialog({
        modal:true,
        width:608,
        height:225,
        title:"Log in"
        });   
        });
</script>
<a href=\"#\" id=\"log\">Login</a> 

this worked well and i added a code to close the box like,

$(window).click(function(event) {
    if (($(event.target).closest('.ui-dialog')).length>0) {
        // if clicked on a dialog, do nothing
        return false;
    } else {
        // if clicked outside the dialog, close it
        $('.ui-dialog-content:visible').dialog('close');
    }
})

after this the dialog box isn't shown. i added this code inside document.ready. so can someone help in this? Thanks!.

Answer 1

Check if the event source is not the button.

$(window).bind('click', function(event) {
    //....
    else if(event.target.id!='log'){ 
        $('.ui-dialog-content:visible').dialog('close'); 
    }
    //....
}

Answer 2

$('#myBox').dialog({
   open: function(event, ui) {                      
       $('.ui-widget-overlay').click(function() {
           $('#stickerBox').dialog('close');
       });
   }
});

Answer 3

Seker,

I would suggest you to use event.preventDefault() for the first click.

Also set the $(window).click() on the $('#log').click() event and remove that event once been executed.

Might that help you.

$('#log').bind('click', function(event){
    // The default event is been cancelled
    event.preventDefault();

    $('#add_predicts_popup1').dialog({
        modal:true,
        width:608,
        height:225,
        title:"Log in"
    });

    // Adding the click event to close the Dialog.
    $(window).bind('click', function(event) {
        if (($(event.target).closest('.ui-dialog')).length>0) {
            // if clicked on a dialog, do nothing
            return false;
        } else {
            // if clicked outside the dialog, close it
            $('.ui-dialog-content:visible').dialog('close');

            // remove the click of window.
            $(window).unbind('click');
        }
    });
});