Jquery中 实现气泡消息提示

效果

实现

jsp页面代码

<dd class="fl rel ml_05em text_12em">
                                接货确认
                             <span id="orderComfirmRed" class="abs pl_05em pr_05em mt_05em top_0 right_0 c_white bor_rad_05em minus_mr_1em line_h_14em text_al_c bg_red-orange " style="display:none"></span>
</dd>

页面通过一个隐藏的span标签实现，其中span标签的大小 通过class属性来控制，这里不是原生jquery的class的属性，不要全部复使用。

记住span的id。

jquery代码

实现思想是：

当页面加载完之后，通过ajax提交后台去查询数据，将查到的消息数传回前段，如果为0，则不显示span，如果不为0，则显示span，并将消息数量作为span的内容。

在js中：

 $(function(){

      var url = "${ctx}/front/tbOnPurchaseAction/waitReceived";
     $.ajax({
      async : false,
         cache : false,
         type : 'POST',
         url : url,
         data :{dsType:'sysDs'},
           
         dataType:"json",
         success : function(data) {
          
          if(data.data==0){
            $("#orderComfirmRed").hide();
            
           }else{
            $("#orderComfirmRed").css("display","block");
            
            $("#orderComfirmRed").text(data.data); 
            
           }
           
           
         }
        });
  });

后台action代码

@ResponseBody
 @RequestMapping("/waitReceived" )
 public Json waitReceived(@QueryParam("dsType")   @DefaultValue("sysDs") String dsType) {
  Json jsonResult = new Json();
  jsonResult.setTitle("红点");
  Integer count=0;
  String num=null;
  Map<String, Object>map=new HashMap<String,Object>();
  List<orderComfirm> data = new ArrayList<>();
  
  try {
   String code=SubjectUtil.getCurrentUser().getOrgCode();
   map.put("code", code);
   data = tbComfirmService.queryOrderComfirm(map);
   
   if (data.size()>0) {
     count=data.size();
    
    
   }
  
   if(count>=100) {
    num="99+";
   }else {
    num=count.toString();
   }
   jsonResult.setData(num);
   jsonResult.setStatus(true);
   jsonResult.setMessage("接口访问成功！");
  } catch (Exception ex) {
   LogService.getInstance(this).error("获取数据失败：" + ex.getMessage(), ex);
  }
 return jsonResult;
 }