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

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

 

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 noticeUP=function(obj){
      $(".wrapFloat-ck").css({"z-index":100});
      $(".wrapFloat-ck .float-box").css("display","none");
      $(obj).children(".float-box").css("display","block");
      //弹出层的高度
      var jmpHt=($(obj).children(".float-box").outerHeight().toString()).split("px");//弹出层的高度
      //具体内容框
      var txtHt=($(obj).children(".float-box").children(".float-bd").outerHeight().toString()).split("px");
      var arwTop=txtHt[0]-1; //边框箭头Y坐标
      var dirDwStr="<div class='dirDw' style='top:"+arwTop+"px'>&nbsp;</div>";
      $(obj).children(".float-box").children(".dirUp").remove(); //删除向上箭头
      $(obj).children(".float-box").append(dirDwStr); //添加向下箭头
      var space=jmpHt-txtHt[0]; //除去主要文本内容框剩余区域高度
     //计算箭头针对文字的位置
     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","top":"-"+jmpHt+"px"});
       $(obj).children(".float-box").children(".float-bd").css({"margin-bottom":space,"margin-top":"0"});
       $(obj).children(".float-box").children(".dirDw").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");
         }
     });

   }

页面实现代码（简洁型）

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