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

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();   
    });
})
原文地址:https://www.cnblogs.com/moguzi12345/p/7929498.html