制作网页右下角弹窗广告步骤？新手入门指南全分享！|game519

昨天有人私信问我网页右边那个广告弹窗怎么搞的，正好最近给个人博客加了这个功能，今天就从头讲讲咋弄的。这东西看着花里胡哨，实际动手才发现坑真不少。

从新建文件开始踩坑

我先是打开VS Code新建了个html文件，想着不就是个会跳出来的小方框嘛随手敲了个div盒子，设了个固定宽高，background涂成骚紫色，结果这玩意儿直接杵在页面正中央，跟个墓碑似的。

核心问题出在这三点：

小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区

搜了教程才知道要用position:fixed，在CSS里加上right:0和bottom:0，直接贴到右下角了！结果刚高兴两秒就傻眼——页面滚动时弹窗也跟着上下跑，跟狗皮膏药似的甩不掉。原来得把position改成absolute，父元素还得设成relative。这弯弯绕绕的，差点把键盘砸了。

具体操作是：

弹窗右上角那个X按钮搞死人！开始用<span>画了个叉叉，点半天没反应。才想起要绑JavaScript事件，写了段*('closeBtn').onclick = function()...这下倒是能关了，可刷新页面又弹出来。又折腾localStorage存关闭状态，代码如下：

关键代码长这样：

搞完后手机上一看全乱套了！赶紧加@media把宽度改成100%，边距调到10px。顺手加了个box-shadow让弹窗浮起来，结果阴影把底下按钮挡住了。又把z-index调到9999，差点把显示器盯穿才调好位置。每次调css都像在排雷，改个padding都能引发连环车祸。

整个过程最气人的是：

这玩意儿虽然能用，但儿子跑过来乱按键盘，弹窗突然疯狂闪现消失。吓得我赶紧拔了电源，现在看到右下角有东西弹出来就头皮发麻。要我说，做这个不如直接去学怎么屏蔽广告，真的。