点击按钮显示，点击空白处隐藏

html：

<div id="divTop" class="xiaotieshi_msg" style="position:absolute; display:none;">    
   <div style="text-align:center;">多数情况下，8个领域中除了知识常识外的其他7个领域，都应优先学习；
　　　　各个领域中的核心类技能优先学习，核心类技能中，技能年龄小的优先学习。
　　</div>    
</div> 
<input type="button" class="xiaotieshi" id="btnShow" value="选课贴士" /> 

 

js：

$(function () {
    $(\'#btnShow\').click(function (event) {    
        //取消事件冒泡    
        event.stopPropagation();    
        //设置弹出层的位置    
        var offset = $(event.target).offset();    
        $(\'#divTop\').css({ "display":"block"});
        //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。    
        // $(\'#divTop\').toggle(\'slow\');    
    });    
    //点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。    
    $(document).click(function (event) { $(\'#divTop\').fadeOut(1000) });    
        $(\'#divTop\').click(function (event) {  
        // $(this).fadeOut(1000)  //1s后隐藏
        // $(\'#divTop\').slideUp(\'slow\')  //向上隐藏
        event.stopPropagation();   
    });
})