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(); }); })