jQuery實現在右下角彈出提示框
阿新 • • 發佈：2019-02-16
用jQuery實現這個功能其實非常簡單，網上的例子太多太多了。不過，那些例子一般沒有涉及到後臺往前臺傳值的問題。在本文中這個問題會得到解決。
在實際應用中，提示框都是自動彈出的，因此，jQuery函式需寫在jsp頁面的<html>之外，即在<html>標籤之外寫一個<script>標籤，這樣，在載入jsp頁面的內容之前會先執行這裡面的方法。然後，彈出框其實就是一個div層，滿足條件就顯示這個層，在div中則可以顯示由後臺傳過來的值，進行迭代輸出。
在執行這個彈出框之前，應該先有一個條件判斷，我這裡的需求是，當合同到期的天數為1的時候就自動彈出提示框。var ids = "${certificate_info_id}"; //去掉"[]"; var newIds = ids.substr(1,ids.length-2); //通過空格擷取字元 var arrayIds = newIds.split(" "); var len = arrayIds.length; //再拼接字元 var str = ""; for(var i = 0;i<len;i++){ str+=arrayIds[i]; } if(str!=""){ //openRemind(str); $(document).ready(function(){ var mes = $("#kq_prompt"); mes.slideDown(); $("#iGetIt").click(function(){ mes.slideUp(); }); }); }
我是先在後臺找到符合條件的id，然後傳到前臺，在前臺再進行一次判斷。
div的程式碼：
中間輸出的內容可以是struts2標籤、jstl、EL表達示等，反正自己習慣怎麼用就怎麼寫。<div id="kq_prompt"> <p id="closeP"><b>過期提醒</b></p> (……中間輸出內容略過……) <p style="padding:5px 10px;text-align:center"><span id="iGetIt">我知道了</span></p> </div>
slideDown()是向上顯示div，slideUp()向下隱藏div，click()就是點選觸發效果。
最後貼上CSS程式碼：
由kq_prompt可以看到，div設定為絕對定位，距離右邊為0，距離下邊為0，這樣就顯示在右下角了。另外，display為none，就是隱藏的，然後使用了jQuery的slideDown()方法後又會自動顯示出來。#kq_prompt{ width:300px; height:400px; overflow:hidden; display:none; border:1px solid #bbb; position:absolute; bottom:0; right:0; background:#fff; font-size:13px; } #closeP{ border-bottom:1px solid #bbb; width:100%; height:20px; cursor:pointer; line-height:20px; text-align:center; color:blue; } #iGetIt{ background:#4985B7; cursor:pointer; padding:5px 10px; color:#fff; font-weight:bold; }
最後上一張效果圖：
另外這個效果，在IE瀏覽器下會有點抖動現象，可以在JSP頁面上新增：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">在做這個之前，幾乎沒有用過jQuery，所以在實現之前覺得這個好神奇，但做完之後卻又覺得比較簡單。這應該就是做與不做之間的差別吧。
之前用window.open()實現了這個功能，但是比較醜，比現在的這個更醜。上面的標題欄死活去不了，所以就採用了jQuery來實現。