如何给难以关闭的悬浮广告位增加关闭按钮

• • 腾讯云建站教程
  • 宝塔面板建站教程
  • 老薛主机建站教程
  • SiteGround建站教程

做站的都知道，广告和用户体验是一个难以调和的矛盾，特别是小站点在没有固定的合作伙伴支撑网站发展的情况下，挂广告联盟成了大多数站长的选择。但百度、360这些广告的收益却不敢恭维，咱们不得不选择收益较高的小联盟，然而小联盟的广告经常却远没有百度、360这些联盟的广告友好。

其中最讨人厌的就是小联盟的广告经常出现无法“一键关闭”的情况，比如右下角悬浮广告：广告边缘处出现的关闭字样实际上毫无用处，倒是误导你点了广告或者直接没有关闭按钮。虽然雅兮网也挂了这种广告，但实际上笔者对这种诱导点击深恶痛绝！

悬浮广告看似关闭按钮实则诱导点击

所以咱今天就来给这类广告增加一个可用的关闭按钮，在不损害广告商利益的前提下保障用户体验，实际上这种无法关闭的广告有违法嫌疑。

分析

笔者观察了一些较友好的悬浮广告，其关闭功能原理是在广告<div>盒子里有一个点击按钮，点击触发js,将广告<div>盒子增加一个CSS样式style=”display:none;”从而广告消失，原理非常简单。

一般情况下，小联盟的悬浮广告都是通过在网站上投放一段广告js，然后执行出一个css样式为position: fixed;的<div>盒子，里面通过嵌套调取广告内容，此时广告<div>盒子内没有关闭按钮。

通过分析，我们得出来只需要新增一个关闭<div>，也对其设置position:fixed;样式，点击它，让他找到广告<div>盒子，然后给广告<div>盒子增加一个CSS样式style=”display:none;”,由于按钮不在广告盒子中，我们还要让它自己在点击后消失，不然广告隐藏了，关闭按钮还在悬浮着。

得出代码

实际代码如下：

上述代码建议直接跟悬浮广告代码放在一起，其中关闭按钮<div>的样式right，bottom根据实际情况进行修改，让其能够完美的和广告结合在一起；getElementById后面的id需要仔细查看你广告的盒子id；图片建议本地化，雅兮网启用了防盗链，直接调用可能无法显示。达到如下效果，大家可测试雅兮网悬浮广告效果！

为悬浮广告增加关闭按钮效果

本代码部署简单，效果显著，样式也能与绝大多数广告适配，欢迎大家使用。

最后还要说几句：大家都知道悬浮广告不如固定广告，固定广告不如不挂广告，但是网站运营维护是需要时间精力还有金钱的，特别是有一些访客的网站，不挂广告怎么坚持的下去？特别是没有固定合作伙伴或者还没有找到赢利点的站点，挂悬浮广告也是无奈之举。

所以希望大家不要动不动就说“你为什么要挂个这种广告啊？”“我就不喜欢广告，我的网站就不挂广告！！”“你网站广告太多了，看着烦”情况不一样就不要用自己的标准去要求别人，你知道别人投了多少钱么？仅此…