源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 8038|回复: 0

[CSS/Html] div固定页面右下角实现

[复制链接]

3108

主题

3510

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
276075
发表于 2022-6-20 23:30:40 | 显示全部楼层 |阅读模式
今天写个客服弹窗源码的时候,用到固定的代码,记录一下发给大家,希望能用得到!

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>使用CSS将Div固定在窗口的右下角</title>
  5. <style>
  6. #INDEXT_RB_AD{
  7. clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid;
  8. bottom:5px; right:5px;

  9. /* 火狐、Google浏览器只需要后面这一句代码即可 */
  10. position:fixed !important;

  11. /* 以下代码是针对IE6的 */
  12. _position:absolute;
  13. _top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) );
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div style="height:2000px;">使用CSS将Div固定在窗口的右下角</div>
  19. <div id="INDEXT_RB_AD" style="display:;">
  20. <div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer; " οnclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">关闭</div>
  21. <div>这里是您要显示的内容</div>
  22. </div>
  23. </body>
  24. </html>

  25. =======================================================================
  26. 如果要将该功能写入js文件里,供网站多个页面同时调用,可以使用下列代码
  27. =======================================================================

  28. <script>
  29. //var RB_FLOAT_AD = "no"; //在不需要显示的页面加上此行代码
  30. if ( typeof(RB_FLOAT_AD) == "undefined" || RB_FLOAT_AD != "no" ){
  31. //输出CSS样式
  32. document.write('<style>#INDEXT_RB_AD{ clear:both; width:200px; height:100px; z-index:1000; overflow:hidden; border:1px #ccc solid; bottom:10px; right:5px; /* 火狐、Google浏览器只需要后面这一句代码即可 */ position:fixed !important; /* 以下代码是针对IE6的 */ _position:absolute; _top: expression( eval( document.documentElement.scrollTop + document.documentElement.clientHeight - this.offsetHeight - (parseInt(this.currentStyle.marginTop,10)||0) - (parseInt(this.currentStyle.marginBottom,10)||0) ) - (parseInt(this.currentStyle.bottom,10)||0) ); }</style>');
  33. //
  34. document.write('<div id="INDEXT_RB_AD" style="display:;"><div align="right" style=" width:100%; height:25px; line-height:25px; cursor:pointer;" οnclick="document.getElementById('INDEXT_RB_AD').style.display = 'none';">关闭</div><div>这里是您要显示的内容</div></div>');
  35. }
  36. </script>
复制代码
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-7-14 22:52 , Processed in 0.103523 second(s), 25 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明