视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
纯js的右下角弹窗实例代码
2020-11-27 20:24:10 责编:小OO
文档
下面小编就为大家带来一篇纯js的右下角弹窗实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

background-color: #ccffcc">这个弹窗是如下图的效果:

打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出。

采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事。如果采用窗口自下而上地移动,还要考虑p的position设置问题,这个问题还涉及一系列兼容性问题,很严重。

之所以称之为纯js的右下角弹窗,是因为,在任意页面,只需要如下引入Jquery之后,再引入这个Js,则可以使用,唯一注意就是Jquery的引入一定要在这个Js之前,由于我的JS是全基于Jquery写成的。没Jquery支持可不行。

这个弹窗的Js代码notice_pop.js如下:

说是Jquery其实更多是HTML的内容,关键是设置p的position为absolute,加个灰色的1px的边框给它,在zindex上面设置为最高,之后安排在 浏览器高度/宽度-其大小的位置,再摆到右下角。

在其里面的标题子面板,放两个float的p,一个在左,一个在右,以实现弹框标题和关闭按钮,分居两侧的效果,再用clear:both清请这个float。给下面的内容让路。

下载本文
显示全文
专题