3

Basically I am trying to implement a login such as that of the new twitter. When you click on Sign In a div pops up with the fields. Now when I click anywhere outside the div (div losing focus) then the div should disappear.

I have tried the technique mentioned at How to blur the div element?

The code is as follows:

$("body").click(function(evt) {
            
            if (evt.target.id !== 'loginDialog') {
                $("#loginDialog").hide();
            }
        });

The trouble with that is the target.id will not equal to loginDialog even if I click somewhere withing loginDialog say within a child div.

So the above is a good direction to proceed towards, but the solution is incomplete.

What is the best way to achieve this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
shashi
  • 4,616
  • 9
  • 50
  • 77
  • I have a hunch some event bubbling handling code will be required but never done that before – shashi Mar 02 '11 at 09:14

3 Answers3

8

If moving your mouse outside is not enough and you want it to disappear only if the user clicks outside of it, here's a snippet that might help you.

$('body').click(function(evt) {
    if($(evt.target).parents('#loginDialog').length==0) {
        $('#loginDialog').hide();
    }
});
pestaa
  • 4,749
  • 2
  • 23
  • 32
  • Ok , the approach is right, but I did a few tweaks. Instead of $(this) I used $(evt.target) as $(this) is always referenced by the body so its parent is html. Also the comparison I used is .length !=0 and hide the logindialog in the else condition. – shashi Mar 02 '11 at 10:21
  • 1
    You are right, I didn't think it through. Sorry. I fix it for subsequent visitors. – pestaa Mar 02 '11 at 19:26
4

Better to use jquery fancybox plugin for iframe http://fancybox.net/ in the various example

[UPDATE]::Sorry for stupid hypothetical code. check the working code

<script type="text/javascript">
    $(function (){
        $(document).click(
            function (e){
                var blur = $('#blur');
                var position = $(blur).position();
                var height = $(blur).height();
                var width = $(blur).width();

                if((e.clientX > position.left && e.clientX < position.left + width) && 
                    (e.clientY > position.top && e.clientY < position.left + height)
                ){
                    alert(e.clientX+' '+e.clientY);

                }
                else{       
                    /*Hide the div*/                    
                        $('#blur').hide();
                    /*Hide the div*/

                }


            }
        )
    })
</script>
<div id="blur">Blur me</div>
S L
  • 14,262
  • 17
  • 77
  • 116
  • the blur event is not fired for div's so that shall not work. – shashi Mar 02 '11 at 10:22
  • This is also a good approach, however pestaa's code is just a couple of lines of code so I let that be the answer. I have upvoted your answer though! – shashi Mar 02 '11 at 13:06
1

Not such a good practce but might work...

$('body').click(function(){
     $('#loginDialog').hide();     

});
$('#loginDialog').click(function(evt){
    evt.stopPropagation();
});
Jishnu A P
  • 14,202
  • 8
  • 40
  • 50