JQuery - make a popup that disappears (like datepicker) when clicking outside popup

The below code works in a jsfiddle in Chrome but not in IE7/8/9.



What is meant to happen is:
 1.
click on "onetxt" then the red block appears.

2.
the red block must only hide if you click on anything except "Input1" , "redDiv" or "onetxt"

 
What happens is if you click on the redDiv then it hides -- it looks like its because the red div is not getting focused in time.

The effect required is that of the jquery datpicker - if you click outside of the div, the div hides. If you click on the div - the div stays visible.

Can you please help..

thanks

<div id="myarea"></div>



    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />
    <br /><br />


    <input type="text" id="test"  />

Select allOpen in new window

       $(document).ready(function () {
            var hider = null;
            var onetxt = $('<input type="text" />');
            var Input1 = $('<input type="text" />');
            var redDiv = $('<div>', {
                tabindex: "5",
                style: "width:200px;height:200px;background:red; ",
                text: 'test',
                html: "<br /><br />"
            }).append(Input1);


            redDiv.hide();

            onetxt.focus(function () { redDiv.show();});
            Input1.focus(function () { redDiv.show();});
            redDiv.focus(function () { redDiv.show()});

            onetxt.blur(function () { redDiv.hide();});
            Input1.blur(function () { redDiv.hide();});
            redDiv.blur(function () { redDiv.hide() });

            $('#myarea').after(onetxt, redDiv);
        });

Select allOpen in new window