jquery 彈窗 進入網頁_jquery網頁自動彈出層的方法

2、步驟分析：

第一步：引入jQuery相關的檔案

第二步：書寫頁面加載函數

第三步：在頁面加載函數中，擷取顯示廣告圖檔的元素。

第四步：設定定時操作(顯示廣告圖檔的函數)

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

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

第七步：設定定時操作(隐藏廣告圖檔的函數)

第八步：在隐藏廣告圖檔的函數中，使用jQuery的方法讓廣告圖檔隐藏(hide())

第九步：清除隐藏廣告圖檔的定時操作

$(function(){

//1.書寫顯示廣告圖檔的定時操作

time=setInterval("showAd()",3000);

});

//2.書寫顯示圖檔的函數

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);

}

jQuery實作打開網頁自動彈出遮罩層或點選彈出遮罩層功能

HTML PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

www.jb51.net - jQuery簡便實作遮罩層

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;

}

$(document).ready(function(){

showBg();

});

//顯示灰色 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();

}

點選這裡檢視效果

關閉

正在加載，請稍後....

jQuery彈出提示資訊簡潔版(自動消失)

之前看了有一些現成的blockUI、Boxy、tipswindow等的jQuery彈出層插件，可是我的要求并不高，隻需要在儲存後彈出提示資訊即可，至于複雜點的彈出層-可以編輯的，我是直接用bootstrap的modal來實作的，是以我就自己做了一個簡潔的可以用來彈出提示資訊的功能。

首先在頁面放一個提示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彈出提示資訊就完成了。話說上面的東西做了什麼呢，其實就是彈出一個提示資訊，該資訊位置在網頁top50px，left50%，然後再用margin-left左移資訊的一半寬度，以此實作左右居中，半秒fadeIn顯示，2秒停留，然後半秒fadeOut消失。除此之外呢其實我還給彈出資訊美化了一下，就是用了bootstrap的alert alert-success alert-danger alert-info樣 alert-warning式來美化。還有為什麼要用stop(true)呢，主要是因為連續彈出多個提示框的時候，我的做法是讓之前的提示框直接結束所有運動，w3c一看，$(selector).stop(stopAll,goToEnd)，stopAll就是停止未完成的所有運動。

不過這樣有個問題，如果文本太短覺得不好怎麼辦，那就給它#tip加個最小寬度：min-width: 200px;

text-align: center;

至于為何不給showTip方法加個參數設定彈出資訊的停留時間呢，那隻是我不需要這個參數，直接寫死也可以，這隻是個人作風。還有個問題是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傳回資訊需要提示的時候調用一下ShowSuccess或者ShowFailure方法就可以了。你可能會有疑問ShowWarn怎麼長的不一樣，是幹嘛子的呢，主要是因為在表單送出的時候需要進行驗證，用戶端驗證的時候就調用這個方法，用法例如：

加兩個參數$focus和clear主要是為了友善使用。。。

另外若網頁有iframe内聯架構，若該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 = $('');

$('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;

}