消息提示框（点击页面其他元素提示框消失）《一》【原创】

示列 （提示框位于内容下方） 提示框出现，点击页面其他内容消失

CSS代码

/*点击触发 浮动层*/

.wrapFloat-ck{position:relative; display:block; z-index:100;} /*长片说明样式标签*/

.wrapFloat-ck a{text-decoration:none; border-bottom:1px solid; color:#003d86}

.wrapFloat-ck a:hover{color:#FF0000}

.wrapFloat-ck .float-box{display:none; position:absolute; left:0; background-color:#fff; z-index:222; top:19px; text-align:left;} /*向上箭头*/

.wrapFloat-ck .dirUp{ position:absolute; width:22px; height:10px; left:0; top:0; z-index:111; background:url(../images/icon4.jpg) no-repeat; overflow:hidden;} /*向下箭头*/

.wrapFloat-ck .dirDw{ position:absolute; width:22px; height:10px; left:0; z-index:111; background:url(../images/icon5.jpg) no-repeat; overflow:hidden;}

.wrapFloat-ck .float-bd{border:1px solid #a1b2e0; margin-top:9px; background:#fff; display:block;} /*边框*/

.wrapFloat-ck .padding{padding:5px}

.wrapFloat-ck .title{line-height:25px; padding-left:15px; border-bottom:1px solid #a1b2e0; font-weight:bold; color:#333;}

.wrapFloat-ck .txtCnt{ padding:0 5px;color:#333;}

.wrapFloat-ck .txtCnt p{ line-height:18px; padding-bottom:3px;}

JS代码

var noticeDW=function(obj){
      $(".wrapFloat-ck").css({"z-index":100});
      $(".wrapFloat-ck .float-box").css("display","none");
      $(obj).children(".float-box").css("display","block");
      var width=($(obj).width().toString()).split("px");
      var lt=0;
      if($.browser.version != "6.0"){
          lt=parseInt(width[0])/2-10;//计算箭头针对文字的位置
      }
     //显示提示框
     $(obj).css({"z-index":333});
     $(obj).children(".float-box").css("display","block");
     $(obj).children(".float-box").children(".dirUp").css("left",lt+"px");//箭头针对文字居中
     //点击其他元素，当前层隐藏
    $(document).bind('click',function(e){
      var target = $(e.target);
      if(target.closest(".wrapFloat-ck").length == 0){
        $(".wrapFloat-ck").children(".float-box").css("display","none");
        }
     });
  }

页面实现代码（简洁型）

页面实现代码（含标题型）