`
yangphere
  • 浏览: 78062 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

WEB页面右下角弹出窗口在项目中的应用

阅读更多
<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">
#winpop { width:120px; height:0px; position:absolute; right:0; bottom:0; border:1px solid #999999; margin:0; padding:1px; overflow:hidden; display:none; background:#FFFFFF}
#winpop .title { width:100%; height:20px; line-height:20px; background:#FFCC00; font-weight:bold; text-align:center; font-size:12px;}
#winpop .con { width:100%; height:80px; line-height:80px; font-weight:bold; font-size:12px; color:#FF0000; text-decoration:underline; text-align:left;background:#FFF8DC}
.close { position:absolute; right:4px; top:-1px; color:#FF3333; cursor:pointer}
</style>



<script type="text/javascript">
//如果是从数据库中抓符合条件记录来显示
//则将方法tips_pop()方法中传个值就可以了
//function tips_pop(value){
var hide;
function tips_pop(){
     // var orders=value; 这样取的值value就是从数据库中抓出来的值
     var orders='O2008090731;O2008090732;O2008090733;O2008090734;O2008090735;O2008090736';
  view(orders);
  var MsgPop=document.getElementById("winpop");//获取窗口这个对象,即ID为winpop的对象
  var popH=parseInt(MsgPop.style.height);//用parseInt将对象的高度转化为数字,以方便下面比较
   if (popH==0){//如果窗口的高度是0
   MsgPop.style.display="block";//那么将隐藏的窗口显示出来
  hide=setInterval("changeH('up')",2);//开始以每0.002秒调用函数changeH("up"),即每0.002秒向上移动一次
   }
  else {//否则
   hide=setInterval("changeH('down')",2);//开始以每0.002秒调用函数changeH("down"),即每0.002秒向下移动一次
  }
}
function changeH(str)
{

var MsgPop=document.getElementById("winpop");
var popH=parseInt(MsgPop.style.height);
if(str=="up"){//如果这个参数是UP
  if (popH<=160){//如果转化为数值的高度小于等于100
  MsgPop.style.height=(popH+8).toString()+"px";//高度增加4个象素
  }
  else{ 
  clearInterval(hide);//否则就取消这个函数调用,意思就是如果高度超过160象度了,就不再增长了
  }
}
if(str=="down"){
  if (popH>=8)
  {//如果这个参数是down
  MsgPop.style.height=(popH-8).toString()+"px";//那么窗口的高度减少4个象素
  }
  else{//否则
  clearInterval(hide);//否则就取消这个函数调用,意思就是如果高度小于4个象度的时候,就不再减了
  MsgPop.style.display="none";//因为窗口有边框,所以还是可以看见1~2象素没缩进去,这时候就把DIV隐藏掉
  }
}
}
window.onload=function()
{//加载
document.getElementById('winpop').style.height='0px';
setTimeout("tips_pop()",800);//3秒后调用tips_pop()这个函数 setInterval
}


  function view(s) {  
   arry = s.split(";");
   var str = "";
  
   for(i=0;i<arry.length;i++) {
    str = str+"<tr><td><font size=2><a href='/项目名/noresolvedorder.do?method=noresolved&order_no="+arry[i]+"'>"+arry[i]+"</a></font></td></tr>";
   }
   document.all.myorder.innerHTML = "<table><tr><td><font size=2>未处理订单</font></td></tr>"+str+"</table>";
  }

</script>

</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<span onclick="tips_pop()" style="cursor:hand">查看信息</span>
<div id="winpop">
<div class="title">温馨提示<span class="close" onclick="tips_pop()">X</span></div>
    <!--  <div class="con">未读信息(1)</div> -->
<div id="myorder" class="con">点击这里查看详细</div>
</div>
</body>
分享到:
评论

相关推荐

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

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

    Ajax右下角弹出窗口

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

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

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

    jquery右下角弹出窗口插件

    在Web开发中,常常需要实现各种交互效果来提升用户体验,其中右下角弹出窗口是一个常见的需求。它通常用于显示通知、提示信息或者进行用户交互。"jQuery右下角弹出窗口插件"就是这样一个工具,它能够帮助开发者快速...

    BS 浏览器右下角弹出窗口

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

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

    "模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式"是一个专注于实现这一功能的资源,它提供了多种实现此类通知的技术手段。下面将详细阐述这四种不同的实现方式以及它们在实际应用中的价值。 首先,右下角...

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

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

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

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

    asp.net 网页右下角弹出消息提示对话框(最小化提示框时带有小图标闪烁效果)

    在标题和描述中提到的“asp.net 网页右下角弹出消息提示对话框(最小化提示框时带有小图标闪烁效果)”,这是一种常见的交互设计,用于吸引用户的注意力,即使他们在浏览其他窗口或应用时也能注意到这些重要的消息。...

    jQuery实现网页右下角弹出窗口特效.zip

    在这个"jQuery实现网页右下角弹出窗口特效.zip"压缩包中,包含了一些关键文件,用于创建一个在网页右下角弹出的窗口效果。下面将详细解释这些知识点。 1. **jQuery库**:jQuery库的核心功能是通过简洁的API来处理...

    asp.net mvc 弹出窗口 技巧

    在ASP.NET MVC中实现弹出窗口功能,能够增强用户体验,例如用于确认操作、显示详细信息或进行表单输入。以下是一些关于在ASP.NET MVC中实现弹出窗口的关键知识点: 1. **JavaScript与jQuery库**:在ASP.NET MVC中,...

    屏幕右下角弹出窗口 (Demo)---jquery

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

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

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

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

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

    右下角弹出及时仿QQ消息

    标题中的“右下角弹出及时仿QQ消息”是指一种软件设计技巧,它模拟了腾讯QQ即时通讯软件中常见的消息通知方式。这种设计通常用于在应用程序运行时,以非侵入性的方式向用户显示重要的通知或者提醒信息。这种方式能够...

    jquery向右边弹出的分享插件

    在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本篇文章将详细讲解如何...在项目中,可以根据具体需求对代码进行调整和扩展,以满足不同的应用场景。

    Ext.window从右下角弹出/隐藏

    ### Ext.window从右下角弹出/隐藏:深入解析与实现 #### 一、概述 在Web应用开发中,为了提升用户体验,开发者经常会利用各种UI框架来实现丰富的交互效果。ExtJS作为一款成熟且功能强大的JavaScript框架,在这方面...

    .net 网页右下角弹窗

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

    右下角弹窗代码 web开发

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

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

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

Global site tag (gtag.js) - Google Analytics