页面右下角提示信息框

最新推荐文章于 2024-08-12 14:43:17 发布

xb12369

最新推荐文章于 2024-08-12 14:43:17 发布

阅读量5.4k

点赞数

分类专栏： Js 文章标签：弹出框右下角提示框

本文链接：https://blog.csdn.net/xb12369/article/details/51499689

版权

Js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!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 οnlοad='initPage();'>
  </body>
  <script type="text/javascript">
    function initPage(){
        var returnMsg = "<p>信息1 jquery-1.7.2.min.js</p><p>信息2 notice.js</p>";
        $.show('提示信息',returnMsg,10000);
    }
  </script>
  <script src="jquery.min.js" type="text/javascript" ></script>
  <script type="text/javascript" >
	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":"#F0F9FD",color:"#1F336B","z-index":"999",border:"1px #F2F2FB solid",margin:"2px",padding:"10px","font-weight":"bold","line-height":"25px",display:"none",width:"400px",height:"200px"});
    $('#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",height:"135px"});
     
    /* 绑定事件*/
    $('#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);
}
  </script>
</html>

直接复制，修改下jquery.min.js的路径，就可以看到效果！！！