纯js右下角弹出窗口示例

该弹出窗口是下图的效果：

打开网页时，这个弹出窗口会淡入，然后点击右上角的关闭按钮，实际上是一次；会逐渐消失。

采用淡入淡出是因为直接Jquery一个fadeIn和fadeOut省事。如果窗口从下往上移动，也要考虑div的位置设置，这也涉及到一系列的兼容性问题，非常严重。

之所以称之为纯js右下角的弹出窗口，是因为，在任何页面上，你只需要如下介绍Jquery，然后介绍这个Js，然后就可以使用了。唯一需要注意的是，Jquery的引入必须在这个JS之前，因为我的Js都是基于Jquery编写的。没有Jquery的支持是做不到的。

！DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN ' ' http://www . w3 . org/TR/HTML 4/loose . DTD ' htmlhearteta http-equiv=' Content-Type ' Content=' text/HTML；Charset=UTF-8'title message提醒/title script src=' http : jquery-1 . 8 . 3 . js ' type=' text/JavaScript '/script script src=' http 3360 notice _ pop.js ' type=' text/JavaScript '/script/head body/html此弹出窗口的Js代码notice _ pop . Js如下：

函数pop _ init (title，content){//获取当前浏览器窗口大小var窗口宽度=$ (document)。宽度()；var windowHeight=$(文档)。高度()；//弹出窗口的大小var权重=320；可变高度=240；$(“body”)。追加(' div id=' pop _ div ' style=' display : none；位置：绝对；border:1px实心# e0e0e0z索引：99；宽度：“重量”px；height: ' height ' pxtop : '(window height-height-10)' px；left : '(windowWidth-weight-10)' px ' ' ' div style=' line-height :32 px；背景： # f6f 0 F3；border-bottom:1px实心# e0e0e0font-size :14 px；padding:0 0 0 10px'' div style=' float:left'title '/div div style=' float : right；cursor:pointer'b onclick=' pop _ close()'/div ' ' div style=' clear : both '/div ' '/div ' ' div id=' content ' ' content '/div ' '/div ')；}函数pop_close(){$('#pop_div ')。fade out(400)；} $(文档)。ready (function () {pop _ init('公告信息'，' ulli ss/lilisss/Li/ul ')；$('#pop_div ')。法丁(400)；});其实说起来，Jquery更多的是HTML内容。关键是将div的位置设置为绝对，给它添加一个灰色的1px边框，将其设置为zindex上的最高值，然后将其排列在浏览器的高度/宽度-它的大小，然后将其放在右下角。

在标题子面板，放两个float的div，一个在左边，一个在右边，实现弹出标题和关闭按钮，将两边分开的效果，然后用clear:both清除这个float。为以下内容让路。

以上纯js右下角弹出窗口的例子是边肖分享的全部内容，希望能给大家一个参考和支持。