右下角弹出层

最新推荐文章于 2023-04-20 15:57:10 发布
最新推荐文章于 2023-04-20 15:57:10 发布
阅读量475 收藏
点赞数
分类专栏： JavaScript 文章标签： layer function scroll float div border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shirleyrong/article/details/4641544
版权

 <html>
<head><title>右下角弹出层(可最小化)兼容IE火狐 - LIEHUO.NET</title>
<style type="text/css">
<!--
       *{margin:0;padding:0;}
       body{text-align:center;}
       #main{border:red 1px solid;width:1000px;height:1600px;margin:0 auto;}
       #main #Layer3{width:400px;height:150px;border:green 1px solid;text-align:left;position:absolute;visibility:hidden;}
       #main #Layer3 #open{float:left;text-align:center;width:360px}
       #main #Layer3 #close{float:right;}
     // -->
</style>
</head>
<body ><div id="main">
<div id="Layer3"><div id="open" οnmοuseοver="openbox();"> <a href="http://www.liehuo.net/" _fcksavedurl="http://www.liehuo.net/" οnclick="openbox()">点击访问烈火网(LIEHUO.NET)</a> </div>
<div id="close"><a href="#" _fcksavedurl="#" οnclick="closebox()" >关闭</a><script type="text/javascript">
     <!--
       var Layer3=document.getElementById("Layer3")
       var main=document.getElementById("main")
     
       /*Layer3层开始设为隐藏，不然开始的时候会不出现在底部，这里通过跟js代码同步条镇，使scroll层开始就出现在左底*/
       Layer3.style.visibility="visible"
      function runright()
       {
        
         /*这里-4主要是为了显示的比较好,因为我设置了边框*/
         Layer3.style.top=document.body.scrollTop+document.body.clientHeight-Layer3.clientHeight-4+"px"
         Layer3.style.rigth=document.body.scrollLeft+document.body.clientWidth-Layer3.clientWidth-4+"px"
         /*隔一段时间执行这个函数*/
         setTimeout("runright()",30)
         }
        
  
  /*关闭:设置高度一直减*/
      function closebox()
      {
       
        Layer3.style.height=scroll.offsetHeight-4+"px"
      
        //if (Layer3.offsetHeight>20)
       //  {
       // setTimeout("closebox()",5)
        // }
       // else
       //  {
            Layer3.style.visibility="hidden"
      //   }
      
      }
      function openbox()
      {
        
       
        if (Layer3.offsetHeight<148)
         {
            Layer3.style.visibility="visible"
        Layer3.style.height=Layer3.offsetHeight+2+"px"
        setTimeout("openbox()",5)
         }
      
      }
     //www.liehuo.net
      runright();
     // -->
 
    </script>
</div>
</div>
</div>
</body>
</html>
文章源自：烈火网，原文：http://www.liehuo.net/a/200909/148716.html

shirleyrong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQ右下角弹框，自动向上不重叠弹出
08-10
Jquery右下角弹出框提示，多个提示向上叠加
Web右下角弹出框提示，可叠加.zip
08-26
Web右下角弹出框提示，初始化叠加 3个，叠加次数 可以自己输入数字自动叠加
网页右下角弹出层
jackaney的专栏
04-25 82
网页右下角弹出层 × window.onload = getMsg; window.onresize = resizeDiv; window.onerror = function(){} var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0; v...
layer右下脚弹窗
我的博客
09-11 754
//layer 右下脚弹窗 l...
仿扣扣右下角弹出层
11-14
"仿扣扣右下角弹出层"是一种常见的UI设计元素，常用于通知、消息提示或者简短交互，它的特点是位于屏幕的右下角，与QQ等即时通讯软件中的消息提醒方式相似，能够吸引用户的注意力而不会过于打扰他们的主操作流程。...
javascript右下角弹出层
12-05
javascript 右下角弹出层,右下角探出广告窗口的javascript代码
仿扣扣右下角弹出层.
11-14
"仿扣扣右下角弹出层"是一个常见的UI设计元素，主要用于通知、提示或者交互反馈，这种设计常见于许多即时通讯软件如QQ。下面将详细探讨这一设计的特点、实现原理以及相关技术。 首先，"仿扣扣右下角弹出层"的设计...
jQuery 右下角滑动弹出可关闭重现层完整代码
10-27
在本实例中，我们将探讨如何使用jQuery来实现一个右下角滑动弹出的可关闭重现层，这种效果常见于网站广告或通知。 首先，我们需要理解这个实例的基本结构。在HTML部分，我们有两个主要的元素：`#jihuaslide` 和 `#...
jQuery右下角弹出层插件_可最小化和定时自动关闭
07-09
本篇文章将详细讲解基于jQuery实现的右下角弹出层插件，该插件具备可最小化和定时自动关闭的功能。 一、jQuery右下角弹出层插件基础 1. 插件设计：弹出层通常用于显示通知、消息或者进行用户交互，而放置在屏幕右...
Jquery右下角弹出框提示，多个提示向上叠加
05-14
Jquery弹出框 提示框 多个提示向上叠加
消息通知弹框（layer）
sdjzping的专栏
02-03 1998
通知消息弹框
layui的弹出层用法记录
m0_58244250的博客
04-20 528
content: 'stu/other/stuScoringDetails'//这里需要公告查看子页面，传id在弹窗打开。content: ['HtmlPage2.html', 'no'], //iframe的url，no代表不显示滚动条。layer.msg('加载中...',{icon: 16,time:false,shade:0.6});layer.alert('提示内容', { icon: 1 ,title: '信息'})', '#Button5', {btn: ['确定', '取消'] //按钮。
客服弹窗中使用layer库自定义展示的标题 - 网站/网页在线客服源码教程
程序员老狼专注开发aigc或客服系统应用
01-06 180
我在实现客服系统的过程中，使用layer实现右下角弹窗效果，现在需要自定义layer弹窗的标题和增加自定义按钮 layer.open({ type: 2, title: 'My Window<button class="btn btn-primary" id="btn-reload">Reload</button>', // 在标题中加入按钮 shadeCl...
layui屏幕右侧弹出层用法并解决layui获取不到弹出层中的表单元素
qq3892997的博客
08-19 1793
layui屏幕右侧弹出层用法，并解决layui获取不到弹出层中的表单元素
layui框架——弹出层layer
热门推荐
meixu568的专栏
07-26 9万+
两种调用方法： 1、引用独立的layer.js文件 引入好layer.js后，直接用即可 <script src="layer.js"></script> <script> layer.msg('hello'); </script> 2、调用layui中的layer模块 layui.use('layer', function(){ ...
layer - 简单好用的Web弹出层组件使用详解6（弹出框的样式、参数设置）
你好，我姓刘
09-07 2274
（1）skin 属性可以传入 layer 内置的皮肤样式 class 名来改变整个弹出框的样式。默认情况下只有点击提示框上的关闭按钮才可以将其关闭，我们也可以将 shadeClose 设为为 true，从而实现点击弹层外区域（遮罩）也可以关闭提示框。（1）move 默认值为 .layui-layer-title，表示触发标题区域的拖拽。（1）title 属性除了可以简单地设置标题文字外，还可以附带上相关的 CSS 样式。（2）如果将 shade 设置为 0，则表示不需要遮罩（提示框变成非模态的）
JS来实现右下角弹出DIV,可最小化关闭
ＢabyＦace゛‐尐蔡。的博客
02-29 4640
(素材背景) HTML代码: 用JS来实现右下角弹出DIV,可最小化关闭 /* 右下角跳出的广告 */ #downmsg_emessage{POSITION: fixed;_position:absolute; z-index:100; bottom:0;right:0; background:url(image/down_msg_bg.gif) no-repe
js 右下角弹出框
新手上路
04-17 311
[code="html"] 右下角提示代码 #msg_win{border:1px solid #A67901;background:#EAEAEA;width:300px;position:absolute;right:2;margin:0px;display:none;overflow:hidden;z-index:99;} #msg_...
layui弹出层的按钮怎么设置右下角
最新发布
06-03
如果需要将按钮设置在弹出层的右下角，可以将按钮的class属性设置为`layui-btn layui-btn-primary layui-btn-radius layui-btn-position layui-right layui-bottom`，其中`layui-right`和`layui-bottom`分别表示将...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值