Html 右下角弹出提示框

最新推荐文章于 2023-11-30 13:40:47 发布
最新推荐文章于 2023-11-30 13:40:47 发布
阅读量1w 收藏 6
点赞数
分类专栏： 01 Html 文章标签： html border function class table div 
<HTML>
<HEAD>
<TITLE>提示 </TITLE>
<script type="text/javascript">
<!--
<!--右下脚弹出窗口开始-->
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;

function getMsg()
{
try
{
  divTop = parseInt(document.getElementById("loft_win").style.top,10);
  divLeft = parseInt(document.getElementById("loft_win").style.left,10);
  divHeight = parseInt(document.getElementById("loft_win").offsetHeight,10);
  divWidth = parseInt(document.getElementById("loft_win").offsetWidth,10);
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  document.getElementById("loft_win").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
  document.getElementById("loft_win").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
  document.getElementById("loft_win").style.visibility="visible";
  objTimer = window.setInterval("moveDiv()",10);
}
catch(e){}
}

//初始化位置
function resizeDiv()
{
i+=1;
//if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
try
{
  divHeight = parseInt(document.getElementById("loft_win").offsetHeight,10);
  divWidth = parseInt(document.getElementById("loft_win").offsetWidth,10);
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  document.getElementById("loft_win").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
  document.getElementById("loft_win").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
}
catch(e){}
}

//最小化
function minsizeDiv()
{
i+=1
//if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
try
{
  divHeight = parseInt(document.getElementById("loft_win_min").offsetHeight,10);
  divWidth = parseInt(document.getElementById("loft_win_min").offsetWidth,10);
  docWidth = document.body.clientWidth;
  docHeight = document.body.clientHeight;
  document.getElementById("loft_win_min").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
  document.getElementById("loft_win_min").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
}
catch(e){}
}

//移动
function moveDiv()
{
try
{
if(parseInt(document.getElementById("loft_win").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
  window.clearInterval(objTimer);
  objTimer = window.setInterval("resizeDiv()",1);
}
divTop = parseInt(document.getElementById("loft_win").style.top,10);
document.getElementById("loft_win").style.top = divTop -1;
}
catch(e){}
}

function minDiv()
{
closeDiv();
document.getElementById('loft_win_min').style.visibility='visible';
objTimer = window.setInterval("minsizeDiv()",1);
}

function maxDiv()
{
document.getElementById('loft_win_min').style.visibility='hidden';
document.getElementById('loft_win').style.visibility='visible';
objTimer = window.setInterval("resizeDiv()",1);
//resizeDiv()
getMsg();
}

function closeDiv()
{
document.getElementById('loft_win').style.visibility='hidden';
document.getElementById('loft_win_min').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer);
}
<!--右下脚弹出窗口结束-->
-->
</script>
<style type="text/css">
<!--
#loft_win {border:#0066FF 1px solid;}
#loft_win_min {border:#0066FF 1px solid;}
.loft_win_head {color: #FFFFFF; font-size:13px; background-color:#5e7aa6; height:25px; padding:0,5,0,5;}
#contentDiv {background-color:#FFFFFF; border:#0066FF 1px solid; border-left-style:none; border-right-style:none;}
a { font-size:12px; color:#000000;}
a:link {font-size:12px; color:#999999; text-decoration:none;}
a:visited { font-size:12px; color:#999999; text-decoration:none;}
a:hover {font-size:13px; color:#999999; text-decoration:none; border:#FF9900 1px dashed; border-left-style:none; border-right-style:none; border-top-style:none;}
a:actived {font-size:12px; color:#000000; text-decoration:none;}
-->
</style>
</HEAD>

<BODY>
<!--提示窗口代码开始-->
<!--初状态-->
<DIV id="loft_win" style="Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden;WIDTH: 250px; POSITION: absolute; TOP: 0px; HEIGHT: 150px;">
<TABLE cellSpacing=0 cellPadding=0 width="100%" bgcolor="#FFFFFF" border=0>
  <TR>
    <td width="100%" valign="top" align="center">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="70" class="loft_win_head">提示窗口</td>
      <td width="26" class="loft_win_head"> </td>
      <td align="right" class="loft_win_head">
        <span style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" title=最小化 οnclick=minDiv() >- </span><span style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" title=关闭 οnclick=closeDiv() >×</span>
      </td>
      </tr>
    </table>
    </td>
  </TR>
  <TR>
    <TD height="130" align="center" valign="middle" colSpan=3>
    <div id="contentDiv">
      <table width="100%" height="100%" cellpadding="0" cellspacing="0">
      <tr>
        <td align="left" height="100%">
        <div>        <b>尊敬的用户，由于8月17日零时起进行系统升级，业务将暂停使用约10分钟，业务暂停期间给您带来的不便敬请谅解！</b>
        </div>
        </td>
      </tr>
      </table>
    </div>
    </TD>
  </TR>
</TABLE>
</DIV>

<!--最小化状态-->
<DIV id="loft_win_min" style="Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden;WIDTH: 250px; POSITION: absolute; TOP: 0px;">
<TABLE cellSpacing=0 cellPadding=0 width="100%" bgcolor="#FFFFFF" border=0>
  <TR>
    <td width="100%" valign="top" align="center">
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
      <td width="70" class="loft_win_head">提示窗口</td>
      <td width="26" class="loft_win_head"> </td>
      <td align="right" class="loft_win_head">
        <span title=还原 style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" οnclick=maxDiv() >□</span><span title=关闭 style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" οnclick=closeDiv() >×</span>
      </td>
      </tr>
    </table>
    </td>
  </TR>
</TABLE>
</DIV>
<!--提示窗口代码结束-->
</BODY>
</HTML>

passport_daizi
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面设计，网页右下方弹出框，类似QQ,或者CSDN右下角的提示框
09-03
页面设计用js代码，网页右下方弹出框，类似QQ,或者CSDN右下角的提示框，费了两天时间，收集的差不多了，共收集了20多少实例，希望对各位有所帮助。
HTML实现右下角闪烁弹窗
yushun的博客
01-07 1456
HTML实现右下角闪烁弹窗
html5 右下角弹出 广告框
qq_40446718的博客
11-07 5178
.ad {             position: fixed;             right: 0;             bottom: 0;             width: 230px;             height: 120px;             background-image: url(imgs/ad.jpg);            
html弹出框模板（提示框，确定+取消框）
01-21
html下各种弹出框模板（提示框，确定+取消，确定等）包括调用的js和css文件。实测可用，。。。。。。。。。。。。。。。。。。。。。。。。。。。。
html5 模仿qq下拉,JS封装的模仿qq右下角消息弹窗功能示例
weixin_33967069的博客
06-03 199
本文实例讲述了JS封装的模仿qq右下角消息弹窗功能。分享给大家供大家参考，具体如下：在我们的日常开发中，或者生活中，经常需要用到弹出窗。这里我们就用js模拟一下qq消息一样的弹出窗。直接贴代码：www.jb51.net javaScript实现网页右下角弹出窗口代码var ShowMsg={title:'提示',content:'模拟qq弹出框消息提醒',width:'300px',height:...
jquery右下角弹出提示框示例代码
10-26
标题中的“jquery右下角弹出提示框示例代码”是指使用jQuery库来创建一个在网页右下角显示的提示框。这个提示框通常用于显示通知、广告或者其他重要的信息，以吸引用户的注意力。描述提到“在jquery中具体的实现”，...
js点击按钮右下角弹出消息通知提示框代码
06-11
在JavaScript编程中，实现点击按钮后在屏幕右下角弹出消息通知提示框是一项常见的功能，主要用于向用户显示系统状态或操作反馈。本教程将详细讲解如何创建这种通知提示框，包括默认、成功、警告和危险四种不同类型的...
基于jQuery的message插件实现右下角弹出消息框
10-28
在网页开发中，为了增强用户体验，常常需要在页面的特定位置，如右下角，向用户展示一些提示信息。jQuery的message插件提供了一个简单、高效的方法来实现这一功能。这个插件允许开发者轻松地创建可自定义的弹出消息...
jQuery右下角弹出提示框特效代码
03-20
本文将详细解析"jQuery右下角弹出提示框特效代码"的相关知识点，帮助你理解和实现此类功能。 首先，让我们理解标题中的核心概念——"jQuery右下角弹出提示框"。这是一种常见的用户界面设计，用于向用户显示通知或...
JQuery右下角提示弹出框示例
08-17
里面包含了一个 index.html、jquery.messager.js、jquery-1.2.6.pack.js，打开index.html文件后有右下角提示信息。类似QQ会时不时的在右下角提示一些新闻资讯的。
右下角广告弹窗1.html
12-18
部分代码如下： 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%} var handle;
html右下角弹框源码
07-27
网页右下角弹框源码，纯javascript代码，需要jquery支持
点击右下角弹出.html
11-21
通过JavaScript技术，点击页面上的标签或是点击按钮实现页面右下角弹出提示框信息，可搭配websocket等通信技术
HTML5中的Web Notification桌面右下角通知功能的实现
12-13
html5桌面通知(Web Notifications)对于需要实现在新消息入线时，有桌面通知效果的情况下非常有用，在此简单介绍一下这个html5的新属性。通过Web Notifications（桌面通知系统），网站可以在用户桌面弹出一条通知，无论用户是否浏览当前网页，甚至最小化了浏览器，通知均可到达用户桌面。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src=
HTML网页右下角弹出消息通知提示框
最新发布
SmileSunshines的博客
11-30 1609
Naranja网页右下角弹出消息通知提示框js代码，点击按钮触发，包含了4种消息提示框样式：默认(log)、成功(success)、警告(warn)、危险 (error)。
php网页设计导航栏代码,CSS导航栏及弹窗示例代码
weixin_39622562的博客
03-10 1471
最近整理了CSS导航栏及弹窗，具体如下：CSS导航先来看下效果：Insert your titlebody{font-size:12px;}#discuss{width:990px;margin:0 auto;}#mt{/*高度：30px，边框，上边框，背景颜色*/height:30px;border:1px solid #ddd;border-top:2px solid #9d9d9d;back...
html页面实现右下角弹窗提示,JS 实现右下角弹窗
weixin_36429576的博客
06-09 621
JS实现右下角弹窗.win-pop{width:200px;height:0;position:absolute;right:0;bottom:0;border:1px solid #999999;padding:5px;overflow:hidden;font-weight:bold;display:none;background:#FFF;font-size:12px;}.win-pop .t...
html右下角弹出提醒页面,js网页右下角提示框实例
weixin_42305377的博客
06-05 524
function messageTip(pJso) {_.init(this, pJso, {name: 'msg'//提示框标签ID});this.eMsg = document.getElementById(this.name);}messageTip.prototype ={//提示框始终在最右下角rePosition: function(_this) {var divHeight = pa...
html固定在屏幕右下角的信息（提示信息，广告）
xiaoyu的博客
05-05 6090
html固定在屏幕右下角的信息（提示信息，广告）
extjs 右下角弹出框提示向下叠加
08-15
在ExtJS中，右下角弹出框提示向下叠加的做法是通过设置全局的提示框配置来实现的。具体步骤如下： 首先，我们需要在ExtJS应用程序的初始化代码中添加以下代码，以设置默认的提示框弹出位置为右下角： ``` Ext.tip....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值