jquery仿QQ消息框

jquery仿QQ消息框

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > QQ消息框 </ title >
   < script  type ="text/javascript"  src ="jquery.js" ></ script >
   < script  type ="text/javascript"  src ="MessageDialogQQ.js" ></ script >
  < script  type ="text/javascript" >
         $(document).ready( function () {
            $( " #message " ).Show( 256 , 185 );
         });
        </ script >
</ head >
< body >
< div >
1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br />
1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br />
1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br />
1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br />
1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br />
1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br /> 1 < br />
</ div >
  < div  id ="message"  style ="z-index:100;position:absolute;display:none;bottom:0; right:0; overflow:hidden;" >
  < div  id ="backimage" >   < img  src ="tips_bg.jpg"   alt ="这是一张图片" /></ div >
     < div  style ="width:100%;height:25px;overflow:hidden;"  id ="messageTool" >
         < div  style ="padding:3px 0 0 35px;width:100px;line-height:20px;text-align:center;overflow:hidden;position:absolute;"  id ="msgtitle" > 这是一个标题 </ div >
          < span  id ="message_close"  style ="right:10px;width:16px;text-align:center;cursor:pointer;position:absolute;" > × </ span >
         < div  style ="clear:both;" ></ div >
     </ div >
      < div  id ="message_content"  style ="margin:0 5px 0 5px;padding:10px 0 10px 5px;width:239px;height:135px;text-align:left;overflow:hidden;" >
    这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容 这是内容
     </ div >
     </ div >
</ body >
</ html >

 

 

// 作者:王珺
// 时间2009年6月30日9:02:51（修改）
// 版本:v 1.1.1.2(第二个版本)修正在发生滚动后点击关闭消息框不往下滚动的BUG（而是往上）
   
 ( function ($) {
        $.fn.extend({
            Show:  function (widht,height) {
             var  TopY = 0 ; // 初始化元素距父元素的距离
            $( this ).css( " width " ,widht + " px " ).css( " height " ,height + " px " ); // 设置消息框的大小
            $( this ).slideDown( 1000 ); // 弹出
            $( " #messageTool " ).css( " margin-top " , - height); // 为内容部分创建高度  溢出
            $( " #message_close " ).click( function () { // 当点击关闭按钮的时候
                  if (TopY == 0 )
                 {
                       $( " #message " ).slideUp( 1000 ); // 这里之所以用slideUp是为了兼用Firefox浏览器
                 }
                 else
                {
                      $( " #message " ).animate({top: TopY + height},  " slow " ,  function () { $( " #message " ).hide(); }); // 当TopY不等于0时  ie下和Firefox效果一样
                }
             });
             $(window).scroll( function () {
                 $( " #message " ).css( " top " , $(window).scrollTop()  +  $(window).height()  -  $( " #message " ).height()); // 当滚动条滚动的时候始终在屏幕的右下角
                 TopY = $( " #message " ).offset().top; // 当滚动条滚动的时候随时设置元素距父原素距离
              });
            }
         })}
)(jQuery);