jquery: 弹窗点击一下窗口外区域，弹窗消失，而点击窗口内部不会消失

常见的效果如：弹窗点击一下窗口外区域，弹窗消失，而点击窗口内部不会消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <title>无标题文档</title>  
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
    <script type="text/javascript">  
        $(function(){   
           
            $("ul,input").click(function(e){   
                alert(e);
                e?e.stopPropagation():event.cancelBubble = true;   
            });   
                   
            $("input").focus(function() {    
            $("ul").fadeIn();    
               
            });    
            $(document).click(function() {    
                $("ul").fadeOut();    
                   
            });    
        })   
    </script>  
    </head>  
    <body>  
    <div style="position:relative">  
    <input type="text" value="" width="100">  
    <ul style="position:absolute; top:20px; left:0px; border:1px solid red; height:100px; overflow:scroll;overflow-x:hidden; display:none">  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
        <li>123312312</li>  
    </ul>  
    </div>  
    </body>  
    </html>

 

 

posted @ 2012-07-04 14:36  oaijuru  阅读(1606)  评论(0)  编辑  收藏  举报