網頁右下角彈窗詳解

admin發表於2018-09-07
網頁

眾多網站有右下角彈窗效果，可以作為廣告或公告之用，帶有關閉按鈕，非常的人性化，能夠給使用者帶來比較良好的體驗，下面通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
#content{
  width:30px;
  height:1500px;
  margin:0px auto;
}
#theWindow{
  width:300px;
  height:200px;
  border:1px solid #000;
  position:fixed;
  bottom:2px;
  right:2px;
  display:none;
  background-color:White;
}
#theWindow a{
  position:absolute;
  top:8px;
  right:8px;
  font-size:12px;
  text-decoration:none;
  color:Blue;
}
#reshow{
  position:fixed;
  right:2px;
  bottom:2px;
  font-size:12px;
  display:none;
  background-color:White;
  cursor:pointer;
  border:1px solid #000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript"> 
function softwhy(){ 
  $("#theWindow").slideDown("slow");
} 
$(document).ready(function(){ 
  setTimeout(function(){ 
    softwhy(); 
  }, 1000);
    
  $("#close").click(function(){ 
    $("#theWindow").slideUp("slow"); 
  });
}) 
</script>
</head>
<body>
<div id="content">螞蟻部落歡迎您，每一天都是新的好好珍惜。</div>
<div id="theWindow"> 
  <a href="javaScript:void(0)" id="close">關閉</a> 
  <span>螞蟻部落歡迎您</span>
</div>
</body>
</html>

網頁右下角出現一個彈窗，點選關閉按鈕可以關閉此彈窗，實現過程如下：

一.實現原理:

彈窗採用fixed定位方式，可以固定在網頁的右下角。

網頁文件結構載入完畢一秒之後呼叫softwhy函式，此函式可以顯示彈窗，當點選關閉按鈕的時候可以使用slideUp方法將視窗隱藏。

二.程式碼註釋:

（1）.function softwhy(){}，此函式可以顯示彈出視窗。

（2）.$("#theWindow").slideDown("slow")，使用slideDown方法將視窗顯示出來。

（3）.$(document).ready(function(){}，文件結構載入完畢之後，再去執行函式中的程式碼。

（4）.setTimeout(function(){}，1000)，1秒之後執行函式，於是就呼叫softwhy函式。

（5）.$("#close").click(function(){})，點選關閉按鈕可以隱藏視窗。

三.相關閱讀:

（1）.slideDown()可以參閱jQuery slideDown()方法一章節。

（2）.setTimeout()可以參閱setTimeout()方法一章節。

（3）.slideUp()可以參閱jQuery slideUp()方法一章節。

相關文章