javascript右下角弹框实现

最新推荐文章于 2022-10-01 08:38:55 发布
最新推荐文章于 2022-10-01 08:38:55 发布
阅读量870 收藏
点赞数
分类专栏： 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>aa</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; 
filter: Alpha(Opacity=100); 
} 
#tip h1 a, #detail h1 a 
{ 
float: right; 
text-decoration: none; 
color: #FFFFFF; 
} 
</style> 
<script type="text/javascript">
    window.onload = function () {
        var divTip = document.createElement("div");
        divTip.id = "tip";
        divTip.innerHTML = "<h1><a href='javascript:void(0)' οnclick='start()'>×</a>设备例行质控自动提醒</h1><p><a href='javascript:void(0)' οnclick='showwin()'>华电电厂SO2监测设备2013-12-12需要例行质控</a></p><p><a href='javascript:void(0)' οnclick='showwin()'>永泰电厂烟尘监测设备2013-12-12需要例行质控</a></p>";
        divTip.style.height = '0px';
        divTip.style.bottom = '0px';
        divTip.style.position = 'fixed';
        divTip.style.width='400px'
        document.body.appendChild(divTip);
    }
    var handle;
    function start(count) {
        var obj = document.getElementById("tip");
        if (parseInt(obj.style.height) == 0) {
            obj.style.display = "block";
            handle = setInterval("changeH('up')", 20);
        } else {
            handle = setInterval("changeH('down')", 20)
        }
    }
    function changeH(str) {
        var obj = document.all ? document.all["tip"] : document.getElementById("tip");
        if (str == "up") {
            if (parseInt(obj.style.height) > 100)
                clearInterval(handle);
            else
                obj.style.height = (parseInt(obj.style.height) + 8).toString() + "px";
        }
        if (str == "down") {
            if (parseInt(obj.style.height) < 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();
        window.open("http://tools.jb51.net");
    }
</script> 
</head> 
<body> 
<a href="javascript:void(0)" οnclick="start()">click</a> 
</body> 
</html>

zkcharge
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js右下角定时通知提示框的实现
娜年夏天
01-10 657
1、初次进入页面需要调用一下方法： 0}">onLoad="document.getElementById('tip').style.height='0px';select()"> 2、加入提示框的代码 ×最新信息 //这里是提示音的标签 3、相关css样式 #tip ul li{} #tip { position:fixed; right:0px; botto
javascript实现弹窗
weixin_48727085的博客
06-29 164
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹窗&
js 实现右下角视频弹窗
05-30
js实现右下角视频弹窗。ie6789 火狐 谷歌测试兼容
js网页右下角弹窗js特效
ICode联盟
10-01 423
js网页右下角弹窗特效，js仿360安全卫士弹窗代码。
页面右下角弹出提示框 js版
彭怀斌的专栏
07-28 3202
String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
JS 实现右下角弹窗
weixin_30800987的博客
10-27 792
<!DOCTYPE HTML> <head> <title>JS实现右下角弹窗</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <style type="text/...
javascript之模态框
背着吉他的蝙蝠女侠的博客
01-03 197
demo代码如下： motaikuang * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; } .box { width: 100%; height: 100%; background: rgba(0,0,0,0.4); pos
右下角弹框
10-23
在网页设计和开发中，"右下角弹框"是一种常见的用户交互元素，它用于向用户展示重要通知、提示信息或者进行互动操作。jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果等任务。在这个场景...
jquery-右下角弹框.zip
05-10
本项目"jquery-右下角弹框.zip"显然是一个使用jQuery实现的Web页面右下角弹窗功能。下面将详细阐述相关知识点。 1. **jQuery库**：jQuery是由John Resig于2006年创建的，它的目标是“使JavaScript编程变得更简单”...
html右下角弹框源码
07-27
本资源提供了一个基于JavaScript实现的右下角弹框源码，特别地，它依赖于jQuery库来运行。jQuery是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果，使得开发变得更加高效。 在HTML页面中，弹框...
JavaScript网站网页右下角弹窗公告内容弹窗可自定义内容附带跳转链接
03-18
1.此代码为纯JS编写 2.适用于PC网站网页使用 3.需要显示的网页调用这个JS文件就好 4.适合放公告内容，标题，可设置跳转链接 5.下载遇到问题可随时联系我们解决 6.遵守CSDN相关规定，代码适用于开发者学习或者商业使用，切勿作为非法用途！
js 超简单右下角可收缩弹窗
09-22
非常的简单，就几行代码实现右下角弹广告或其它提示信息窗体。
js网页右下角弹出提示框
04-23
网页右下角自动弹出提示框，js实现，简单易懂，非常实用；此为转发他人
javaScript实现网页右下角弹出窗口(模拟qq消息)代码
04-07
javaScript实现网页右下角弹出窗口(模拟qq消息)代码，js 模拟qq消息 右下角弹窗 html广告插件 js广告插件
js实现仿MSN带关闭功能的右下角弹窗代码
01-21
本文实例讲述了js实现仿MSN带关闭功能的右下角弹窗代码。分享给大家供大家参考。具体如下： 这是一款非常精致漂亮的仿MSN右下角弹出窗口，带关闭功能，直接复制代码就管用。演示要用到几个小图片，运行的时候点击右键保存一下，这里提供一种思路，并不完全局限于此种方法，熟能生巧。 先来看看运行效果截图： 在线演示地址如下： http://demo.jb51.net/js/2015/js-f-msn-close-able-adv-codes/ 具体代码如下： <HTML> <HEAD> <title>仿MSN右下角弹窗</title> <META http-equiv=Content-Type co
jquary插件右下角弹框等
07-02
在本例中，我们关注的是一个实现右下角弹框的jQuery插件，它旨在模拟类似于QQ焦点新闻弹窗的效果。这种弹窗通常用来展示重要的通知、广告或者其他需要用户即时注意的信息。 首先，我们要理解jQuery的基本概念。...
右下角无限弹框
03-22
完全用javascript手工写得一个右下角弹框工具，可通过修改css自己设置弹出框的样式。
用JavaScript在网页右下角弹出窗口
猪头肉的专栏
01-06 1000
在右下角弹出窗口，常用于广告代码，或一些大网站的用户信息提示，并且会自动隐藏，可以设置时间间隔，弹出窗口的位置和大小，当然，窗口内容全靠你定了，将JS保存为JS文件，方便你调用。   网页右下角的信息框 #winpop { width:200px; height:0px; position:absolute; right:0; bottom:0; border:
用JS写的在网页右下角显示一个信息提示框
IT猿_Ocean的成长之路
02-16 704
网页右下角的信息框     #winpop     {         width: 200px;         height: 0px;         position: absolute;         right: 0;         bottom: 0;         border: 1px solid #666;         margin: 0;
在frameset框架上实现右下角弹窗
最新发布
05-12
要在frameset框架上实现右下角弹窗，可以按照以下步骤进行操作： 1. 在frameset框架中添加一个子框架，用于显示弹窗内容。 2. 在父框架中添加一个按钮或链接，用于触发弹窗。 3. 通过CSS样式设置子框架的位置，使其显示在页面的右下角。 4. 编写JavaScript代码，在点击按钮或链接时显示子框架，点击弹窗以外的区域时隐藏子框架。 以下是具体的实现步骤： 1. 在frameset框架中添加一个子框架： ```html <frameset rows="*,30" frameborder="0"> <frame src="content.html" name="contentFrame"> <frame src="popup.html" name="popupFrame"> </frameset> ``` 上面的代码中，frameset框架中包含两个子框架，分别是名为"contentFrame"和"popupFrame"的框架，其中"contentFrame"用于显示页面内容，"popupFrame"用于显示弹窗内容。 2. 在父框架中添加一个按钮或链接，用于触发弹窗： ```html <a href="#" onclick="showPopup();">弹窗</a> ``` 上面的代码中，我们添加了一个链接，当用户点击链接时会触发名为"showPopup()"的JavaScript函数，用于显示弹窗。 3. 通过CSS样式设置子框架的位置，使其显示在页面的右下角： ```css frame[name="popupFrame"] { position: fixed; right: 20px; bottom: 20px; width: 200px; height: 100px; border: 1px solid #ccc; display: none; } ``` 上面的代码中，我们通过CSS样式设置了名为"popupFrame"的子框架的位置，将它固定在页面的右下角，设置了它的宽度、高度和边框样式，并将它的显示方式设置为"none"，即初始时不显示。 4. 编写JavaScript代码，在点击按钮或链接时显示子框架，点击弹窗以外的区域时隐藏子框架： ```javascript function showPopup() { var popupFrame = window.frames['popupFrame']; popupFrame.style.display = 'block'; } document.onclick = function(event) { var popupFrame = window.frames['popupFrame']; if (event.target != popupFrame) { popupFrame.style.display = 'none'; } } ``` 上面的代码中，我们定义了名为"showPopup()"的函数，用于显示子框架。当用户点击弹窗以外的区域时，会触发"document.onclick"事件，用于隐藏子框架。注意，在这里我们不能直接通过"popupFrame.style.display = 'none'"来隐藏子框架，因为如果用户直接点击子框架上的内容，也会触发"document.onclick"事件，导致子框架无法正常显示。因此，我们需要通过"event.target"来判断用户是否点击了子框架上的内容，从而决定是否隐藏子框架。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值