您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > jquery網(wǎng)頁自動彈出層的方法

jquery網(wǎng)頁自動彈出層的方法

文章來源：365jz.com 點擊數(shù)：1252 更新時間：2018-07-31 10:24 參與評論

1、JQuery效果

2、步驟分析：

第一步：引入jQuery相關的文件

第二步：書寫頁面加載函數(shù)

第三步：在頁面加載函數(shù)中，獲取顯示廣告圖片的元素。

第四步：設置定時操作(顯示廣告圖片的函數(shù))

第五步：在顯示廣告圖片的函數(shù)中，使用jQuery的方法讓廣告圖片顯示(show())

第六步：清除顯示廣告圖片的定時操作

第七步：設置定時操作(隱藏廣告圖片的函數(shù))

第八步：在隱藏廣告圖片的函數(shù)中，使用jQuery的方法讓廣告圖片隱藏(hide())

第九步：清除隱藏廣告圖片的定時操作

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script>
      $(function(){
        //1.書寫顯示廣告圖片的定時操作
        time=setInterval("showAd()",3000);
      });
      //2.書寫顯示圖片的函數(shù)
      function showAd(){
        //3.獲取廣告圖片，并讓其顯示
        //$("#img_2").show(1000);
        $("#img_2").slideDown(3000);  //滑入
        //4.清除顯示圖片的定時操作
        clearInterval(time);
        //5.設置隱藏圖片的定時操作
        time=setInterval("hiddenAd()",3000);
      }
      function hiddenAd(){
        //6.獲取廣告圖片讓其隱藏
        //$("#img_2").hide();
        $("#img_2").slideUp(3000);  //滑出
        //7.清除隱藏圖片的定時操作
        clearInterval(time);
      }   
    </script>

jQuery實現(xiàn)打開網(wǎng)頁自動彈出遮罩層或點擊彈出遮罩層功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.jb51.net - jQuery簡便實現(xiàn)遮罩層</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮動對話框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
 showBg();
});
</script>
<script type="text/javascript">
//顯示灰色 jQuery 遮罩層
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
 $("#dialog").show();
}
//關閉灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<div id="main"><a href="javascript:showBg();" rel="external nofollow" >點擊這里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
  <p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">關閉</a></p>
  <div>正在加載，請稍后....</div>
</div>
</div>
</body>
</html>

jQuery彈出提示信息簡潔版（自動消失）

　　之前看了有一些現(xiàn)成的blockUI、Boxy、tipswindow等的jQuery彈出層插件，可是我的要求并不高，只需要在保存后彈出提示信息即可，至于復雜點的彈出層-可以編輯的，我是直接用bootstrap的modal來實現(xiàn)的，因此我就自己做了一個簡潔的可以用來彈出提示信息的功能。

　　首先在頁面放一個提示strong：<strong id="tip"></strong>。接下來給它設置一下樣式：

　　提示信息樣式

#tip {
    position: absolute;
    top: 50px;
    left: 50%;
    display: none;
    z-index: 9999;
}

　　提示信息腳本

//tip是提示信息，type:'success'是成功信息，'danger'是失敗信息,'info'是普通信息,'warning'是警告信息
function showTip(tip, type) {
    var $tip = $('#tip');
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

　　這樣子，簡單的jQuery彈出提示信息就完成了。話說上面的東西做了什么呢，其實就是彈出一個提示信息，該信息位置在網(wǎng)頁top50px，left50%，然后再用margin-left左移信息的一半寬度，以此實現(xiàn)左右居中，半秒fadeIn顯示，2秒停留，然后半秒fadeOut消失。除此之外呢其實我還給彈出信息美化了一下，就是用了bootstrap的alert alert-success alert-danger alert-info樣 alert-warning式來美化。還有為什么要用stop(true)呢，主要是因為連續(xù)彈出多個提示框的時候，我的做法是讓之前的提示框直接結(jié)束所有運動，w3c一看，$(selector).stop(stopAll,goToEnd)，stopAll就是停止未完成的所有運動。

　　不過這樣有個問題，如果文本太短覺得不好怎么辦，那就給它#tip加個最小寬度：

min-width: 200px;
text-align: center;

　　至于為何不給showTip方法加個參數(shù)設置彈出信息的停留時間呢，那只是我不需要這個參數(shù)，直接寫死也可以，這只是個人作風。還有個問題是showTip方法用起來還是有點不方便呀，那就再封裝一下：

function ShowMsg(msg) {
    ShowTip(msg, 'info');
}
function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}
function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}
function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) {
　　　　 $focus.focus();
    　　if (clear) $focus.val('');
　 　}
    return false;
}

　　這樣在ajax返回信息需要提示的時候調(diào)用一下ShowSuccess或者ShowFailure方法就可以了。你可能會有疑問ShowWarn怎么長的不一樣，是干嘛子的呢，主要是因為在表單提交的時候需要進行驗證，客戶端驗證的時候就調(diào)用這個方法，用法例如：

加兩個參數(shù)$focus和clear主要是為了方便使用。。。

　　另外若網(wǎng)頁有iframe內(nèi)聯(lián)框架，若該iframe里也想讓頂級窗口彈出提示信息，則得改一下showTip方法：

//tip是提示信息，type:'success'是成功信息，'danger'是失敗信息,'info'是普通信息,'warning'是警告信息
function showTip(tip, type) {
　　var $tip = $('#tip', top.document); 
　　$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

　　如果不想樣式和span以及腳本太分散，可以把他們整合成一個js插件：

//tip是提示信息，type:'success'是成功信息，'danger'是失敗信息,'info'是普通信息,'warning'是警告信息
function ShowTip(tip, type) {
    var $tip = $('#tip');
    if ($tip.length == 0) {
        $tip = $('<strong id="tip" style="position:absolute;top:50px;left: 50%;z-index:9999"></strong>');
        $('body').append($tip);
    }
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}
function ShowMsg(msg) {
    ShowTip(msg, 'info');
}
function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}
function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}
function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) {
　　　　 $focus.focus();
    　　if (clear) $focus.val('');
　　 }
    return false;
}