javascript实现简单的页面右下角提示信息框

前端技术 2023/09/01 JavaScript

由于之前找到一个开源的很好用，可以固定在浏览器的右下角；兼容性也很好；加上之后影响到应用的一个小功能点，决定重写一个；这个只能固定在当前页面的右下加，系统是上下结构满足需求，没在继续扩展；
两个函数：
1.lay -- 设置提示框高宽（可选）
2.show -- 设置标题，内容，和停留时间

notice.js

var time;
var delayTime;
$(function(){
  // 增加浮动DIV
  $(\'body\').append(\"<div id=\'notice\' onselectstart=\'return false\'><span class=\'notice_title\'> </span><span class=\'cbtn\'>[关闭]</span><div class=\'notice_content\'></div></div>\");
   
  // 更改样式
  $(\'#notice\').css({right:\"0\",bottom:\"0\",cursor:\"default\",position:\"fixed\",\"background-color\":\"#CFDEF4\",color:\"#1F336B\",\"z-index\":\"999\",border:\"1px #1F336B solid\",margin:\"2px\",padding:\"10px\",\"font-weight\":\"bold\",\"line-height\":\"25px\",display:\"none\"});
  $(\'#notice .cbtn\').css({color:\"#FF0000\",cursor:\"pointer\",\"padding-right\":\"5px\",float:\"right\",position:\"relative\"});
  $(\'#notice .notice_content\').css({margin:\"3px\",\"font-weight\":\"normal\",border:\"1px #B9C9EF solid\",\"line-height\":\"20px\",\"margin-bottom\":\"10px\",padding:\"10px\"});
   
  /* 绑定事件*/
  $(\'#notice\').hover(
    function(){
      $(this).stop(true,true).slideDown();
      clearTimeout(time);
    },
    function(){
      time = setTimeout(\'_notice()\',delayTime);
    }
  );
   
  //绑定关闭事件
  $(\'.cbtn\').bind(\'click\',function(){
    $(\'#notice\').slideUp(\'fast\');
    clearTimeout(time);
  });
});
$.extend({
  lay:function(_width,_height){
    $(\'#notice\').css({width:_width,height:_height});
  },
  show:function(_title,_msg,_time){
     delayTime = _time;
     $(\'.notice_title\').html(_title);
     $(\'.notice_content\').html(_msg);
     $(\'#notice\').slideDown(2000);
     time = setTimeout(\'_notice()\',delayTime);
  },
});
function _notice(){
  $(\'#notice\').slideUp(2000);
}

index.html

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
 <head>
  <title>index.html</title>
   
  <meta http-equiv=\"keywords\" content=\"keyword1,keyword2,keyword3\"/>
  <meta http-equiv=\"description\" content=\"this is my page\"/>
  <meta http-equiv=\"content-type\" content=\"text/html; charset=GBK\"/>
   
  <!--<link rel=\"stylesheet\" type=\"text/css\" href=\"./styles.css\">-->
 
 </head>
  
 <body onload=\'initPage();\'>
 </body>
 <script type=\"text/javascript\">
  function initPage(){
    var returnMsg = \"<p>信息1 jquery-1.7.2.min.js</p><p>信息2 notice.js</p><p>信息3</p>\";
    $.show(\'提示信息\',returnMsg,10000);
  }
 </script>
 <script src=\"jquery-1.7.2.min.js\" type=\"text/javascript\" ></script>
 <script src=\"notice.js\" type=\"text/javascript\" ></script>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/2103

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案