我们在前端开发中，有时候需要在网页上增加一些漂浮的广告，如一个div就很适合做这种载体，但我们也希望如果用户想关闭该广告时，可以简单的就关闭了，那么如何实现呢？工具/原料moreEclipsejdk8谷歌浏览器chromejquery前端框架tomcat V8.5方法/步骤1/6分步阅读

在Eclipse里面，新建一个web项目，在里面新建一个页面，设置该页面的背景为一张图片，然后再设置一个带关闭按钮的div广告浮窗，这样就完成了简单的演示效果，具体代码如图所示。

2/6

我们将该项目部署到tomcat服务器下面，点击启动tomcat服务器，当看到如下所示的启动信息后，即表明服务器已经启动，可以在浏览器中访问该项目了。

3/6

我们在谷歌浏览器中，输入ip，端口，项目名称，页面名称，访问该页面，可以看到，该页面背景是一张图片，然后外侧有一个浮动的广告窗体，并且窗体右侧带有一个关闭的标示。

4/6

我们回到代码编辑窗口，增加一段代码：

script type=text/javascript

$(function(){

$(body).on(click,#close,function(){

$(this).parent().parent().remove();

});

});

/script

此段代码的意思是当我们点击“X”时，会移除掉该元素父元素的父元素，即整个漂浮的div，保存下。

5/6

我们刷新下页面，可以看到，与之前相比，表面上并没有什么区别，但是，此时的“X”已经绑定了点击事件，当我们点击时，它会关闭。

6/6

当我们点击“X”后，可以看到，原本存在的漂浮窗体已经消失不见了，这样就达到了我们预期的效果。主要的原理还是：给“X”绑定一个点击事件，当点击时，移除整个div，达到效果。

如果觉得有用，记得点赞或投票支持！

注意事项

这里广告弹窗也不一定要用到div。

这里用到了jquery，如果用其他的框架，也是可以实现的。

HTML开发前端开发DIV关闭