jquery 純js右下角彈窗

時間 2020-10-06

標籤 javascript html java jquery 瀏覽器 app ide 優化 spa .net 欄目 JQuery 简体版

原文原文鏈接

轉至：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。給下面的內容讓路。優化

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。