怎样给网页漂浮广告增加关闭按钮
编辑：Simone
2025-03-13 23:06:06
565 阅读
我们在前端开发中，有时候需要在网页上增加一些漂浮的广告，如一个div就很适合做这种载体，但我们也希望如果用户想关闭该广告时，可以简单的就关闭了，那么如何实现呢？
在Eclipse里面，新建一个web项目，在里面新建一个页面，设置该页面的背景为一张图片，然后再设置一个带关闭按钮的div广告浮窗，这样就完成了简单的演示效果，具体代码如图所示。
我们将该项目部署到tomcat服务器下面，点击启动tomcat服务器，当看到如下所示的启动信息后，即表明服务器已经启动，可以在浏览器中访问该项目了。
我们在谷歌浏览器中，输入ip，端口，项目名称，页面名称，访问该页面，可以看到，该页面背景是一张图片，然后外侧有一个浮动的广告窗体，并且窗体右侧带有一个关闭的标示。
我们回到代码编辑窗口，增加一段代码：
此段代码的意思是当我们点击“X”时，会移除掉该元素父元素的父元素，即整个漂浮的div，保存下。
我们刷新下页面，可以看到，与之前相比，表面上并没有什么区别，但是，此时的“X”已经绑定了点击事件，当我们点击时，它会关闭。
当我们点击“X”后，可以看到，原本存在的漂浮窗体已经消失不见了，这样就达到了我们预期的效果。主要的原理还是：给“X”绑定一个点击事件，当点击时，移除整个div，达到效果。
如果觉得有用，记得点赞或投票支持！
版权声明：本站【趣百科】文章素材来源于网络或者用户投稿，未经许可不得用于商用，如转载保留本文链接：https://www.qubaik.com/answer/155327.html
