轉至:javascript
http://blog.csdn.net/yongh701/article/details/52056997html
彈窗效果:
java
打開網頁的時候,這個彈窗會淡入,以後點擊右上角的關閉按鈕,其實就是一個& times;會淡出。jquery
採用淡入淡出是由於直接Jquery一個fadeIn與fadeOut省事。若是採用窗口自下而上地移動,還要考慮div的position設置問題,這個問題還涉及一系列兼容性問題,很嚴重。瀏覽器
之因此稱之爲純js的右下角彈窗,是由於,在任意頁面,只須要以下引入Jquery以後,再引入這個Js,則可使用,惟一注意就是Jquery的引入必定要在這個Js以前,因爲個人JS是全基於Jquery寫成的。沒Jquery支持可不行。app
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <title>消息提醒</title> <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> function pop_init(title,content) { //取當前瀏覽器窗口大小 var windowWidth=$(document).width(); var windowHeight=$(document).height(); //彈窗的大小 var weight=320; var height=240; $("body").append( "<div id='pop_div'style='display:none;position:absolute;border:1px solid #e0e0e0;z-index:99;width:"+weight+"px;height:"+height+"px;top:"+(windowHeight-height-10)+"px;left:"+(windowWidth-weight-10)+"px'>"+ "<div style='line-height:32px;background:#b4d0b6;border-bottom:1px solid #e0e0e0;font-size:14px;padding:0 0 0 10px;'>" + "<div style='float:left;'><b>"+title+"</b></div><div style='float:right;cursor:pointer;'><b onclick='pop_close()' style='font-size: 24px;'>×</b></div>" + "<div style='clear:both'></div>"+ "</div>" + "<div id='content'>" + content+ "</div>"+ "</div>" ); } function pop_close(){//關閉窗口 $('#pop_div').fadeOut(400); } $(document).ready(function(){//打開窗口 //這裏咱們能夠將後臺查詢的公告信息,遍歷後拼接爲字符串若是 <ul><li>sss1</li><li>sss2</li></ul> TODO pop_init("公告信息","<ul><li><a href='http://www.baidu.com'>通知:請你們多用百度搜索</a></li><li>sss2</li></ul>"); $('#pop_div').fadeIn(400); setTimeout("pop_close()",10000);//10秒後自動關閉 }); </script> </head> <body> <h2>頁面底部彈窗...</h2> <h2>其實彈窗,就是在body後面添加一個div元素,div是塊元素,因此就像一個窗口同樣。這個窗口,咱們本身寫了淡入淡出效果, 記住寫了關閉按鈕。彈窗能夠本身進行優化。這個窗口經過相對定位,將其定在了右下方。</h2> </body> </html>
說是Jquery其實更可能是HTML的內容,關鍵是設置div的position爲absolute,加個灰色的1px的邊框給它,在zindex上面設置爲最高,以後安排在 瀏覽器高度/寬度-其大小的位置,再擺到右下角。ide
在其裏面的標題子面板,放兩個float的div,一個在左,一個在右,以實現彈框標題和關閉按鈕,分居兩側的效果,再用clear:both清請這個float。給下面的內容讓路。優化