`

消息框

    博客分类：
  • js
prototypeJavaScriptQQIEAjax 
阅读更多

-----下面上传了一个仿QQ的消息提示框，我添加了ajax的功能--------

 

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>MSN 弹出消息框</title>
<script language="javascript" type="text/javascript">
function MessShow(id,width,height,caption,title,message,target,action)
{
    this.id         = id;
    this.title      = title;
    this.caption    = caption;
    this.message    = message;
    this.target     = target;
    this.action     = action;
    this.width      = width?width:250;
    this.height     = height?height:150;
    this.timeout    = 250;      //消息停留时间
    this.speed      = 10;       //消息速度，越小越快
    this.step       = 2;        //移动步长
    this.right      = screen.width -1;
    this.bottom     = screen.height;
    this.left       = this.right - this.width;
    this.top        = this.bottom - this.height;
    this.timer      = 0;
    this.pause      = false;
    this.close      = false;
    this.autoHide   = true;
}

MessShow.prototype.hide = function()
{
    if(this.onunload())
    {
        var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top;
        var me = this;
        if(this.timer>0)
        {
            window.clearInterval(me.timer);
        }
        var fun = function()
        {
            if(me.pause==false||me.close)
            {
                var x = me.left;
                var y = 0;
                var width = me.width;
                var height = 0;
                if(me.offset>0){
                    height = me.offset;
                }   
                y = me.bottom - height;   
                if(y>=me.bottom){
                    window.clearInterval(me.timer);
                    me.Pop.hide();
                } else {
                    me.offset = me.offset - me.step;
                }
                me.Pop.show(x,y,width,height);  
            }           
        }
        this.timer = window.setInterval(fun,this.speed)    
    }
}
//消息卸载事件，可以重写

MessShow.prototype.onunload = function()
{
    return true;
}
// 消息命令事件，要实现自己的连接，请重写它
MessShow.prototype.oncommand = function()
{
    window.open(this.action,this.target);
    this.hide();
}
// 消息显示方法
MessShow.prototype.show = function()
{
    var oPopup = window.createPopup(); //IE5.5+    
    this.Pop = oPopup;  
    var w = this.width;
    var h = this.height;
    var str = "<DIV style='BORDER-RIGHT:#005FEE 1px solid; BORDER-TOP:#005FEE 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT:#005FEE 1px solid; WIDTH: " + w + "px; BORDER-BOTTOM:#005FEE 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + h + "px; BACKGROUND-COLOR:#FFFFFF'>"
        str += "<TABLE style='BORDER-TOP: #FFFFFF 1px solid; BORDER-LEFT: #FFFFFF 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#FFFFFF border=0>"
        str += "<TR>"
        str += "<TD style='FONT-SIZE: 12px;COLOR: #0052CC' width=30 height=24>∵</TD>"
        str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR:#0052CC; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.caption + "</TD>"
        str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"
        str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: red; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"
        str += "</TR>"
        str += "<TR>"
        str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (h-28) + ">"
        str += "<DIV style='BORDER-RIGHT: FFFFFF 1px solid; PADDING-RIGHT: 8px; BORDER-TOP:#66A3FF 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px; BORDER-LEFT:#FFFFFF 1px solid; WIDTH: 100%; COLOR:#FFFFFF; PADDING-TOP: 8px; BORDER-BOTTOM:#FFFFFF 1px solid; HEIGHT: 100%'><FONT color=#EE0000>" + this.title + "</FONT><BR><BR>"
        str += "<DIV style='WORD-BREAK: break-all' align=left><A href='javascript:void(0)' hidefocus=true id='btCommand'><FONT color=#EE0000>" + this.message + "</FONT></A></DIV>"
        str += "</DIV>"
        str += "</TD>"
        str += "</TR>"
        str += "</TABLE>"
        str += "</DIV>"

    oPopup.document.body.innerHTML = str;
    this.offset = 0;
    var me = this;
    oPopup.document.body.onmouseover = function(){me.pause=true;}
    oPopup.document.body.onmouseout = function(){me.pause=false;}
    var fun = function()
    {
        var x = me.left;
        var y = 0;
        var width    = me.width;
        var height    = me.height;

            if(me.offset>me.height)
            {
                height = me.height;
            } else
            {
                height = me.offset;
            }
        y = me.bottom - me.offset;
        if(y<=me.top)
        {
            me.timeout--;
            if(me.timeout==0)
            {
                window.clearInterval(me.timer);
                if(me.autoHide)
                {
                    me.hide();
                }
            }
        }
        else
        {
            me.offset = me.offset + me.step;
        }
        me.Pop.show(x,y,width,height);
    }  
    this.timer = window.setInterval(fun,this.speed)
    var btClose = oPopup.document.getElementById("btSysClose");
    btClose.onclick = function()
    {
        me.close = true;
        me.hide();
    }
    var btCommand = oPopup.document.getElementById("btCommand");
    btCommand.onclick = function()
    {
        me.oncommand();
    }
}
// 设置速度方法
MessShow.prototype.speed = function(s)
{
    var t = 10;
    try
    {
        t = praseInt(s);
    }
    catch(e){}

    this.speed = t;
}
// 设置步长方法
MessShow.prototype.step = function(s)
{
    var t = 2;
    try
    {
        t = praseInt(s);
    }
    catch(e){}
    this.step = t;
}
MessShow.prototype.rect = function(left,right,top,bottom)
{
    try
    {
        this.left    = left?left:0;
        this.right    = right?right:screen.availWidth -1;
        this.top    = top?top:0;
        this.bottom = bottom?bottom:screen.availHeight;
    }
    catch(e)
    {}
}


      function load()
      {        
         var msg = new MessShow("hello",250,150,"信息","光之翼，你好！","QQ:272912705 请求加为好友！","_bank",'http://www.baidu.com');
         msg.show();
      }
    </script>
</head>
<body onLoad="load()">
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

分享到：
| 项目计划
评论
2 楼 wcdzxxgc 2010-07-21  
楼主这个好像只能用于IE吧，有没有改进以支持其他浏览器的方法啊
1 楼 yangtse_ye 2010-03-25  
popup失去焦点的时候，会隐藏掉。楼主解决了这个问题，牛B。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Labview 自定义消息框

    在Labview中，自定义消息框是一种重要的交互手段，它用于向用户显示信息、询问问题或报告错误。自定义消息框能够使程序更加直观、友好，为用户提供清晰的操作指示和反馈。 **自定义消息框的功能与用途** 1. **信息...

    VC++ 消息框大全

    在VC++编程环境中，消息框是用户界面的重要组成部分，它用于向用户显示简短的信息、询问用户输入或者提供警告。本篇文章将详细讲解如何在VC++ 6.0中使用消息框，以及涵盖各种类型的消息框及其应用源代码。 首先，...

    Winform自定义消息框_开秒信息_winform消息框_winform_开秒过_

    在Windows Forms（Winform）开发中，我们常常需要使用消息框来向用户显示信息、警告或确认操作。标准的 MessageBox 类提供了许多基本功能，但有时它可能无法满足开发者对于更复杂交互或定制化外观的需求。"Winform...

    jquery ui messager 消息框

    jQuery UI Messager是一款基于jQuery和jQuery UI库的插件，用于在Web应用程序中创建美观、功能丰富的消息框。它提供了一种优雅的方式来显示各种类型的通知，如警告、错误、信息和成功消息，增强了用户交互体验。这个...

    DELPHI消息框使用大全

    在Delphi编程环境中，消息框（Message Box）是与用户交互的一种常见方式，它用于向用户显示信息、警告或询问用户。本篇文章将详细介绍如何在Delphi中使用各种类型的消息框，结合实例和源码，帮助初学者快速掌握这一...

    C++ Builder窗体自定义消息框，替换自带ShowMessage对话框，解决ShowMessage字体小不够大的问题。自适应长文本消息、多行文本消息。

    在C++ Builder编程环境中，开发人员常常会遇到需要向用户...在提供的压缩包文件“自定义消息框”中，可能包含了实现这一功能的具体代码和资源，学习和参考这些内容，可以帮助你更好地理解和实践自定义消息框的创建。

    Visual C++编程 消息框

    在Visual C++编程中，消息框（Message Box）是一种用户界面元素，用于向用户显示简短的信息或询问用户的决定。通常，它包含一个标题、一个消息文本和一组按钮，如“确定”、“取消”或“是”、“否”。在本教程中，...

    asp.net弹出消息框 类似msn的消息框

    标题和描述中提到的"asp.net弹出消息框 类似msn的消息框"实际上是在指如何在网页上创建一个模仿MSN消息框效果的通知系统。这个系统通常具备简洁的设计、可定制的样式以及能够快速通知用户关键信息的能力。 在ASP...

    unity制作的非常简单的自定义消息框Demo

    标题"unity制作的非常简单的自定义消息框Demo"意味着这个项目将向我们展示如何在Unity中创建一个基本的、易于理解的消息框示例。这可能包括创建UI元素、编写控制逻辑以及与游戏其他部分的集成。 描述中提到"适合...

    VC 如何创建消息框

    在VC++（Visual C++）开发环境中，创建消息框是相当基础的操作，它主要用于向用户显示简单的信息或者获取用户的简单反馈。本教程将详细介绍如何在VC++中创建和使用消息框，希望对初学者有所帮助。 首先，理解消息框...

    MFC消息框设置演示，源代码加整个工程

    在本文中，我们将深入探讨MFC（Microsoft Foundation Classes）中的消息框设置，这是一个基于C++的库，用于构建Windows应用程序。MFC为Windows API提供了一种面向对象的封装，简化了开发过程。我们将通过源代码分析...

    CSharp实现消息框倒计时自动关闭窗口

    在C#编程中，创建一个具有倒计时功能的消息框并使其在设定的时间后自动关闭是一种常见的需求。这种功能在很多应用中都有所体现，比如软件安装过程中出现的提示信息或者用户确认操作前的警告对话框。下面我们将深入...

    QQ浮动消息框源码 QQ浮动消息框源码

    从给定的文件信息来看，这段代码主要涉及的是创建一个QQ风格的浮动消息框的实现。这个消息框能够根据浏览器窗口的大小和滚动位置自动调整其位置，确保始终处于用户的视野范围内，不会被页面内容遮挡。下面我们将深入...

    Bootstrap toast消息框插件

    Bootstrap Toast消息框插件是基于流行的前端框架Bootstrap开发的一个组件，用于在网页上优雅地展示短暂的通知或消息。这些消息通常包含重要的信息、警告或成功提示，会在用户界面上短暂出现，然后自动消失，或者通过...

    DELPHI MessageBox自定义消息框图标〖源代码〗

    应用程序在运行当中经常要输出各种即时信息，Delphi提供了多种形式的消息对话框可以满足这些要求，尽管可以使用各种标志定制一个消息框，但仍不能将自己的图标放在消息框内，也不能修改其标准行为去创建自己的消息框...

    可缩放消息框+XML读写

    本文将探讨"可缩放消息框"这一技术及其与XML读写操作的结合。"可缩放消息框"是一种能够根据窗口大小动态调整布局的对话框，它可以提供更好的用户体验，特别是当用户调整窗口尺寸时，内容能够自适应地呈现。这种技术...

    类似QQ消息框的对话框

    "类似QQ消息框的对话框"是一个典型的界面设计元素，它模仿了QQ这款流行即时通讯软件中的消息展示方式。这种对话框通常包含发送者和接收者的头像、昵称、消息内容以及时间戳等关键信息，为用户提供了一个清晰、直观的...

    Excel+VBA自动关闭消息框源代码

    ### Excel + VBA 自动关闭消息框源代码详解 #### 一、背景介绍 在Excel VBA编程中，经常会遇到需要弹出消息框提示用户的情况。然而，在某些自动化处理流程中，希望这些消息框能够在一定时间后自动消失，而不是一直...

    VC 消息框实现

    在VC++编程环境中，消息框（MessageBox）是用于向用户显示简单信息或获取用户简单反馈的基本组件。在本文中，我们将深入探讨如何在VC++，特别是使用VC6.0开发环境中，实现消息框的创建与使用。这将涵盖消息框的基本...

    利用Jquery消息框，源代码提供

    jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互，同时也为开发者提供了丰富的插件和扩展功能，如我们今天要讨论的消息框。 首先，理解jQuery消息框的基本概念。消息框通常用于向用户...

Magicbox
Global site tag (gtag.js) - Google Analytics