本文介绍如何使用 JavaScript 和 DIV 元素模拟弹出窗口,并实现窗口内容随页面滚动而跟随的效果。通过简单的 DOM 操作和事件监听,可以创建灵活的自定义弹窗组件,适用于各种需要提示或交互的场景。
JavaScript 实现 DIV 模拟弹出窗口及滚动跟随效果
<!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" lang="zh-CN"> <head> <title>可滚动跟随弹出框效果代码——本站</title> </head> <body> 作者:丁学--滚动跟随 <div id="pop" style="border:1px solid #CCC;display:none;">test<br>hide</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> show <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]