`
king_tt
  • 浏览: 2320445 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Web页面右下角弹出窗口示例代码

 
阅读更多

Web页面右下角弹出窗口示例代码

声明：本代码来源于CSDN论坛，原帖为http://community.csdn.net/Expert/TopicView3.asp?id=5239784
版权归原作者所有，本人只做收藏整理。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<metaname="Keywords"content="51windows.Net">
<METANAME="Author"CONTENT="haiwa">
<title>类似MSN提示的页面效果</title>
</head>
<bodyscroll=no>
看到右下角的提示了吗？如果没有看到，<buttononclick=location.reload();>刷新</button>一下
<scriptlanguage="JavaScript">...
window.onload=getMsg;
window.onresize=resizeDiv;
window.onerror=function()...{}
//短信提示使用(asilas添加)
vardivTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i=0;
functiongetMsg()
...{
try...{
divTop=parseInt(document.getElementById("eMeng").style.top,10)
divLeft=parseInt(document.getElementById("eMeng").style.left,10)
divHeight=parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth=parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth=document.body.clientWidth;
docHeight=document.body.clientHeight;
document.getElementById("eMeng").style.top=parseInt(document.body.scrollTop,10)+

docHeight+10;//divHeight
document.getElementById("eMeng").style.left=parseInt(document.body.scrollLeft,10)+

docWidth-divWidth
document.getElementById("eMeng").style.visibility="visible"
objTimer=window.setInterval("moveDiv()",10)
}
catch(e)...{}
}
functionresizeDiv()
...{
i+=1
if(i>500)closeDiv()
try...{
divHeight=parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth=parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth=document.body.clientWidth;
docHeight=document.body.clientHeight;
document.getElementById("eMeng").style.top=docHeight-divHeight+parseInt

(document.body.scrollTop,10)
document.getElementById("eMeng").style.left=docWidth-divWidth+parseInt

(document.body.scrollLeft,10)
}
catch(e)...{}
}
functionmoveDiv()
...{
try
...{
if(parseInt(document.getElementById("eMeng").style.top,10)<=(docHeight-divHeight+

parseInt(document.body.scrollTop,10)))
...{
window.clearInterval(objTimer)
objTimer=window.setInterval("resizeDiv()",1)
}
divTop=parseInt(document.getElementById("eMeng").style.top,10)
document.getElementById("eMeng").style.top=divTop-1
}
catch(e)...{}
}
functioncloseDiv()
...{
document.getElementById('eMeng').style.visibility='hidden';
if(objTimer)window.clearInterval(objTimer)
}
</script>
<DIVid=eMengstyle="BORDER-RIGHT:#4556901pxsolid;BORDER-TOP:#a6b4cf1pxsolid;Z-

INDEX:99999;LEFT:0px;VISIBILITY:hidden;BORDER-LEFT:#a6b4cf1pxsolid;WIDTH:180px;

BORDER-BOTTOM:#4556901pxsolid;POSITION:absolute;TOP:0px;HEIGHT:116px;BACKGROUND

-COLOR:#c9d3f3">
<TABLEstyle="BORDER-TOP:#ffffff1pxsolid;BORDER-LEFT:#ffffff1pxsolid"cellSpacing=0

cellPadding=0width="100%"bgColor=#cfdef4border=0>
<TBODY>
<TR>
<TDstyle="FONT-SIZE:12px;BACKGROUND-IMAGE:url(msgTopBg.gif);COLOR:#0f2c8c"width=30

height=24></TD>
<TDstyle="FONT-WEIGHT:normal;FONT-SIZE:12px;BACKGROUND-IMAGE:url(msgTopBg.gif);

COLOR:#1f336b;PADDING-TOP:4px;PADDING-left:4px"vAlign=centerwidth="100%">短消息提示

：</TD>
<TDstyle="BACKGROUND-IMAGE:url(msgTopBg.gif);PADDING-TOP:2px;PADDING-right:2px"

vAlign=centeralign=rightwidth=19><spantitle=关闭style="CURSOR:hand;color:red;font-

size:12px;font-weight:bold;margin-right:4px;"onclick=closeDiv()>×</span><!--<IMG

title=关闭style="CURSOR:hand"onclick=closeDiv()hspace=3src="msgClose.jpg">--></TD>
</TR>
<TR>
<TDstyle="PADDING-RIGHT:1px;BACKGROUND-IMAGE:url(1msgBottomBg.jpg);PADDING-BOTTOM:

1px"colSpan=3height=90>
<DIVstyle="BORDER-RIGHT:#b9c9ef1pxsolid;PADDING-RIGHT:13px;BORDER-TOP:#728eb81px

solid;PADDING-LEFT:13px;FONT-SIZE:12px;PADDING-BOTTOM:13px;BORDER-LEFT:#728eb81px

solid;WIDTH:100%;COLOR:#1f336b;PADDING-TOP:18px;BORDER-BOTTOM:#b9c9ef1pxsolid;

HEIGHT:100%">您有<fontcolor=#FF0000>1</font>封新短消息<BR><BR>
<DIValign=centerstyle="word-break:break-all"><ahref="javascript:alert('你好')"><font

color=#FF0000>点击查看短信</font></a></DIV
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
</body>
</html>
调试时注意关闭IE防广告插件！
分享到：
| 第一幅VRay作品
评论
发表评论

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

相关推荐

    页面右下角弹出窗口

    右下角弹出窗口示例 &lt;script src="jquery1.10.2.js"&gt;&lt;/script&gt; #popup { position: fixed; bottom: 0; right: 0; display: none; background: #fff; padding: 10px; border-radius: 5px; box-shadow: 0...

    jquery插件（网页右下角弹出窗口）

    在提供的压缩包“右下角弹出窗口”中，包含了实现以上功能的代码文件和可能的示例。你可以通过查看和研究这些文件，了解插件的工作原理，并在自己的项目中应用或修改。在使用前，确保引入jQuery库，并正确引用插件...

    BS 浏览器右下角弹出窗口

    标题中的“BS 浏览器右下角弹出窗口”指的是在基于浏览器（Browser）的系统中，特别是在Web开发中，实现的一种特定的用户界面效果。这种效果通常用于通知、提示或者显示一些临时性的信息，它会出现在浏览器窗口的右...

    屏幕右下角弹出窗口 （Demo）---jquery

    【标题】：“屏幕右下角弹出窗口（Demo）--...以上就是关于“屏幕右下角弹出窗口（Demo）---jquery”的详细知识点，通过学习和实践这些内容，开发者可以掌握创建自定义通知窗口的技术，并能将其应用于自己的Web项目中。

    右下角窗口提示信息弹出框

    在实现右下角弹出框时，开发者可能会使用到以下JavaScript技术： 1. **事件监听**：监听用户的特定行为，如页面加载、按钮点击等，以便在合适的时间触发弹出框。 2. **CSS动画**：为了使提示框的出现更加吸引用户...

    【精华】页面右下角弹出类似QQ或MSN的消息提示

    标题中的“【精华】页面右下角弹出类似QQ或MSN的消息提示”指的是在网页设计中实现一种类似于即时通讯软件（如QQ、MSN）的消息提示功能。这种功能常见于许多网站，尤其是企业级应用，用于通知用户新消息、提醒或者...

    网页定时刷新（Ajax)并在右下角弹出提示窗口

    接下来，我们讨论如何在右下角弹出提示窗口。这通常通过JavaScript或者CSS来实现，可以结合AjaxPro的数据返回来决定何时显示提示。例如，当服务器返回特定的状态或信息时，我们可以使用以下代码创建一个弹出框： ``...

    web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    在微信中访问Web页面时...综上所述，"web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开"是解决微信内置浏览器限制的一种常见策略，它通过遮罩层和提示按钮，引导用户在更适合的环境下浏览Web页面，提升用户体验。

    右下角弹窗代码 web开发

    在这个场景中，"右下角弹窗代码"可能是指一个JavaScript库或者一组函数，用于创建在网页右下角弹出的窗口。 在JavaScript中，创建弹窗主要通过DOM（文档对象模型）操作来实现。首先，我们需要在HTML中定义一个隐藏...

    .net 网页右下角弹窗

    本篇将详细介绍如何在.NET环境中创建一个右下角弹出窗口，并提供一种临时性的实现方法。 首先，我们需要理解.NET Web开发的基本概念。.NET Framework为开发人员提供了多种工具和技术，如ASP.NET，用于创建服务器端...

    JS实现IE浏览器最小化在桌面右下角弹窗显示

    要实现在桌面右下角弹出通知，我们需要利用Windows API，这是Windows操作系统提供的接口，允许应用程序与操作系统进行交互。然而，由于JavaScript本身不直接支持调用操作系统功能，我们通常会借助ActiveX对象，这是...

    layer web弹出窗口代码

    总的来说，"layer web弹出窗口代码"是Web开发中的利器，能够帮助开发者快速实现各种弹窗功能，提高页面的互动性和用户体验。通过熟练掌握layer的各种用法，你可以轻松创建出功能丰富且易于使用的web弹窗。在layer-v...

    jQuery结合cookie实现的右下角可关闭并且在一定时间不会再弹出窗口效果源码.zip

    在网页设计中，为了提供更好的用户体验，经常需要实现一些交互性的功能，比如右下角弹出的通知窗口。这种窗口通常可以被用户关闭，并且在一定时间内不会再次出现。本示例是利用jQuery库和Cookie技术来实现这一效果的...

    仿msn的三种弹出窗口效果范例

    在描述中提到的“右下角弹出效果”，可以通过计算屏幕尺寸和当前窗口的位置来实现，使得新窗口从屏幕的右下角滑入视线。 2. **动画效果的实现**：弹出速度和时间的自设涉及到动画效果的编程。在.NET中，可以使用...

    网页右下角弹窗

    在提供的压缩包文件中，"网页右下角弹出"可能包含示例代码或资源，可以作为学习和实践网页右下角弹窗的起点。通过深入理解这些代码，你可以了解到如何结合HTML、CSS和JavaScript实现一个具有特定样式的、在不同...

    Macromedia Dreamweaver 8 弹出窗口设计

    ` 表示当浏览器窗口大小发生变化时，调用`enetresizeDiv()`函数重新定位弹出窗口，确保其始终处于屏幕右下角。 - **错误处理**：`window.onerror=function(){};` 这是为了避免脚本执行过程中出现错误而导致页面崩溃...

    flex 苹果桌面效果的弹出窗口

    虽然具体内容没有提供，但可以推断这篇文章可能详细介绍了如何使用Flex来创建这种苹果桌面效果的弹出窗口，包括可能涉及的技术点、步骤、示例代码或者遇到的问题和解决方案。 在“标签”中，“源码”意味着我们可能...

    asp.net弹出窗口大集锦

    将两者结合使用，可以在不重新加载整个页面的情况下，实现页面的部分更新或动态行为，如弹出窗口功能，这极大地增强了Web应用程序的响应性和交互性。 ### 弹出窗口的实现方式 文章中展示了多种利用ASP.NET和...

    可拖动的弹出窗口

    当用户在标题栏上按下鼠标时，记录下当前鼠标的位置（相对于文档）和弹出窗口的左上角位置。 3. **处理鼠标移动**：在mousedown事件触发后，为整个文档添加mousemove事件监听器。当鼠标移动时，计算新的窗口位置，...

    TipsWindown 支持拖拽的jQuery弹出窗口

    TipsWindown是一款基于jQuery的弹出窗口插件，它提供了丰富的功能，包括支持用户通过鼠标拖拽来调整弹出窗口的位置。在Web开发中，这种交互性极大地提升了用户体验，使得用户能够自由地将窗口移动到他们觉得最方便的...

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