`
hz_chenwenbiao
  • 浏览: 1010634 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

右下角弹出提示窗口(转)

    博客分类:
  • JS
阅读更多

右下角弹出提示窗口的JS程序如下:

<!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=gb2312" />
		<title>Js特效--页面右下角弹出提示信息--捷扬网络</title>
		<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

html,body {
	height: 100%;
}

body {
	font-size: 14px;
	line-height: 24px;
}

#tip {
	position: absolute;
	right: 0px;
	bottom: 0px;
	height: 0px;
	width: 180px;
	border: 1px solid #CCCCCC;
	background-color: #eeeeee;
	padding: 1px;
	overflow: hidden;
	display: none;
	font-size: 12px;
	z-index: 10;
}

#tip p {
	padding: 6px;
}

#tip h1,#detail h1 {
	font-size: 14px;
	height: 25px;
	line-height: 25px;
	background-color: #0066CC;
	color: #FFFFFF;
	padding: 0px 3px 0px 3px;
}

#tip h1 a,#detail h1 a {
	float: right;
	text-decoration: none;
	color: #FFFFFF;
}

#shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #CCCCCC;
	-moz-opacity: 0.5;
	filter: Alpha(Opacity =   50);
	opacity: 0.8;
	z-index: 11;
	display: none;
	overflow: hidden;
}

#detail {
	width: 500px;
	height: 200px;
	border: 3px double #ccc;
	background-color: #FFFFFF;
	position: absolute;
	z-index: 30;
	display: none;
	left: 30%;
	top: 30%
}
</style>
		<script type="text/javascript">
	var handle;
	function start() {
		var obj = document.getElementById("tip");
		if (parseInt(obj.style.height) < 30) {
			obj.style.display = "block";
			//setInterval方法则是表示间隔一定时间反复执行某操作。
			handle = setInterval("changeH('up')", 2);
		} else {
			handle = setInterval("changeH('down')", 2)
		}
	}
	function changeH(str) {
		var obj = document.getElementById("tip");
		if (str == "up") {//每两毫秒加8px,直到长度为200px
			if (parseInt(obj.style.height) > 200)
				clearInterval(handle);//清除计数器
			else
				obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";
		}
		if (str == "down") {
			if (parseInt(obj.style.height) < 30) {//小于8时,就直接退出
				clearInterval(handle);
				//obj.style.display = "none";
			} else
				obj.style.height = (parseInt(obj.style.height) - 8).toString() + "px";
		}
	}
	function showwin() {
		document.getElementsByTagName("html")[0].style.overflow = "hidden";
		start();
		document.getElementById("shadow").style.display = "block";
		document.getElementById("detail").style.display = "block";
	}
	function recover() {
		document.getElementsByTagName("html")[0].style.overflow = "auto";
		document.getElementById("shadow").style.display = "none";
		document.getElementById("detail").style.display = "none";
	}
</script>
	</head>

	<body onload="document.getElementById('tip').style.height='0px'">

		<div id="shadow">
		</div>

		<div id="detail">
			<h1>
				<a href="javascript:void(0)" onclick=recover();>×</a>系统提示
			</h1>
			哈哈哈哈你~~~
		</div>

		<div id="tip">
			<h1>
			<!-- 下面这个是出现小的关闭按钮的地方 -->
				<a href="javascript:void(0)" onclick=start();>×</a>信息定制
			</h1>
			<p>
				<a href="javascript:void(0)" onclick=showwin();>点击这里查看详细</a>
			</p>
		</div>

		<p>
			<a href="javascript:void(0)" onclick=start();>点击这里测试</a>
		</p>
		
	</body>
</html>
 简单实用,不过当页面高页超过显示器的长度时,出现滚动条时,当拖动滚动条,那么小提示窗会向上移,这个我也不知道怎样改一下它,可以使它一直处于最下面。
分享到:
评论

相关推荐

    pb半透明弹窗示例(右下角弹出提示窗口)

    标题 "pb半透明弹窗示例(右下角弹出提示窗口)" 指的是一种使用PowerBuilder(简称PB)开发的特定功能,即创建一个具有半透明效果的弹窗,该弹窗会在程序运行时自动在屏幕的右下角出现,用于显示提示信息。...

    MFC制作的屏幕右下角弹出窗口

    《MFC实现屏幕右下角弹出窗口技术详解》 MFC(Microsoft Foundation Classes)是微软提供的一套C++库,用于构建Windows应用程序。在Windows系统中,我们常常会遇到像QQ那样的屏幕右下角弹出窗口,这些窗口通常用于...

    网页右下角弹出提示框

    网页右下角弹出提示框是一种常见的用户交互设计,它能够有效地吸引用户的注意力,传递重要信息或引导用户进行特定操作。这种设计在许多网站和应用中都有应用,尤其是在电子商务、新闻资讯以及社交媒体平台中尤为常见...

    Ajax右下角弹出窗口

    Ajax右下角弹出窗口是一种常见的用户交互设计,它利用Ajax技术实现在不刷新整个页面的情况下,于页面右下角动态展示信息或提示。这种设计不仅提升了用户体验,还能有效地传递实时数据,使得网页更具交互性和响应性。...

    右下角弹出窗口

    在IT行业中,"右下角弹出窗口"通常是指在操作系统桌面右下角显示的小型通知或提示窗口,这类窗口通常用于程序的提醒、消息通知或者系统状态更新。在Delphi编程环境中,开发者可以利用其丰富的组件库来实现这样的功能...

    真正屏幕右下角弹出消息窗口

    标题中的“真正屏幕右下角弹出消息窗口”是指一种技术实现,它允许在操作系统桌面的右下角创建一个独立的、不会随主窗口最小化而消失的通知窗口。这种技术通常用于模仿像QQ和MSN这样的即时通讯软件的提醒功能,它们...

    页面右下角弹出窗口

    在网页设计中,有时我们需要在用户浏览页面时,在右下角弹出一些提示信息或交互窗口,这可以增强用户体验,提供必要的反馈或者引导。在这个场景中,我们可以利用JavaScript库jQuery来实现这一功能,特别是对于支持...

    ASP.NET版 仿QQ MSN 右下角 弹出窗口 提示小窗口 控件

    ASP.NET版 仿QQ MSN 右下角 弹出窗口 提示小窗口 控件仿MSN右下角的弹出窗口控件,实际上不仅仅局限于右下角,网页的其它地方都可以用,这是Asp.net修正版。  源代码中包括C#、VB.net两种代码的示例,以及控件源...

    c# winform 右下角弹出窗口

    在C# WinForm应用开发中,右下角弹出窗口通常被称为系统托盘通知或气泡提示,这种功能常用于在程序最小化到系统托盘时显示消息或者提供非阻塞式的用户交互。下面我们将详细探讨如何实现这个功能。 首先,我们需要...

    模拟QQ在网页右下角弹出提示窗口

    在网页设计中,模拟QQ在网页右下角弹出提示窗口是一种常见的用户交互方式,它能够吸引用户的注意力,提供信息反馈或引导用户进行特定操作。这个功能主要通过JavaScript(JS)来实现,结合HTML和CSS来创建弹出的div...

    网页右下角弹出提示窗口

    网页右下角弹出提示窗口是一种常见的用户交互设计,它能够吸引用户的注意力并提供关键信息。在JSP(JavaServer Pages)中实现这样的功能,通常会结合HTML、JavaScript和CSS来完成。以下将详细介绍如何利用这些技术...

    flex 自动弹出窗口(右下角弹出,右上角弹出)

    要实现在屏幕右下角弹出窗口,我们需要做以下几步: - 创建弹出窗口组件:这可以是自定义的Flex组件或者使用内置的`Alert`、`Prompt`等。 - 设置弹出位置:利用`PopUpManager.createPopUp()`方法时,传递一个包含x...

    WEB窗口右下角弹出窗口提示效果

    在网页设计中,"WEB窗口右下角弹出窗口提示效果"是一种常见的用户交互手段,用于向用户展示通知、消息或者重要信息。这种效果能够吸引用户的注意力,而不干扰他们当前的操作,因此在现代Web应用中非常流行。下面将...

    C# winform 右下角弹出消息框

    C# WinForm 消息提示功能,类似QQ的消息提醒样式,可定时关闭,消息框弹出从下往上,关闭从上往下,有动画效果。当用户鼠标停放在提示框上时,自动关闭功能停止 ,当移走鼠标时,重新开始自动关闭功能 。有C#源码;...

    Qt 右下角弹出框

    在Qt编程中,创建一个右下角弹出框可以实现应用程序的通知功能,使得用户在不离开当前工作界面的情况下,能够接收到重要的信息提示。本文将详细介绍如何使用Qt库来实现这个功能,以及相关的编程技巧。 首先,Qt是一...

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

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

    jquery插件(网页右下角弹出窗口)

    在网页设计中,有时我们需要实现一些交互功能,如向用户展示重要通知、提示信息或者广告,这时网页右下角弹出窗口的功能就显得尤为重要。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果...

    VB 6 窗口右下角气泡式弹出提示源码.rar

    VB弹出右下角窗口的例子,是一个模仿以前MSN风格的VB 弹出式气泡提示,弹出后显示在屏幕的右下角窗口,可自定义右下角的气泡提示的样式、文字等,右下角窗口渐变色显示,设置窗口功能很多,不一一介绍了,截图只是...

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

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

    模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式

    通过定时器和AJAX请求,可以实现实时监听服务器端的数据变化,当有新消息时在右下角弹出提示。这种方式灵活性高,但需要一定的前端编程基础。 2. **CSS3动画效果**: CSS3引入了动画和过渡效果,允许开发者创建...

Global site tag (gtag.js) - Google Analytics