jquery layer彈出層怎么關(guān)閉

你看一下layer的官方演示里邊就有在iframe中關(guān)閉自身的例子

成都創(chuàng)新互聯(lián)公司自2013年起，先為吉林等服務建站，吉林等地企業(yè)，進行企業(yè)商務咨詢服務。為吉林企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。

在你上面的“頁面”中，在你提交表單后執(zhí)行

var index = parent.layer.getframeindex(window.name); //獲取當前窗體索引

$('#提交的元素').on('click', function(){

parent.layer.close(index); //執(zhí)行關(guān)閉

});你可能需要修改上面的"submit"提交為button提交

jquery 點擊彈出層的確定按鈕后，彈出層關(guān)閉，部分刷新當前頁面的指定的div內(nèi)容

一個簡單的例子

$("button").click(function(){

$("#div1").hide();//關(guān)閉彈出層

$("#div2").load('demo_ajax_load.txt');//從另一個文件載入數(shù)據(jù)更新到ID為div2的內(nèi)容

});

demo_ajax_load.txt的內(nèi)容，可以自己寫。當然這個文件也可以是asp/php/jsp等文件，只要是能顯示內(nèi)容的，就可以被加載。

怎么將頁面的值傳到j(luò)query 彈出層中

是后臺的返回數(shù)據(jù)么？

目前我們的http web訪問形式，都是應答被動式的，所以 必須要有請求才能返回數(shù)據(jù)。

首先，用ajax請求一個頁面；

頁面接收ajax傳輸?shù)臄?shù)據(jù)后，執(zhí)行運算，返回數(shù)據(jù)。直接echo ，response.write之類的輸出想要的數(shù)據(jù)即可。

ajax執(zhí)行函數(shù)中，有success函數(shù)可以設(shè)定，獲取后臺頁面的輸出數(shù)據(jù)，取得即可

例子：

$.ajax({

url?:?"admin_login_exec.php",

type?:?"POST",

dataType?:?"text",

timeout?:?5000,

async?:?false,

success?:?function(text)?{

//此處text為獲得的服務器返回值，賦值到j(luò)query?彈出層即可。比如用個帶id的p標簽顯示數(shù)據(jù)，獲得text后改下值

},

error?:?function()?{

alert("網(wǎng)絡(luò)或服務器問題!")

}

jquery彈出層，過幾秒就消失

首先加一個提示層并隱藏

div id="addBox" style="display:none;"保存成功/div

點擊添加后顯示，過一段時間后隱藏

$("$addBox").show();

setTimeout($("$addBox").hide(),3000)

jquery layer怎么彈出指定的html內(nèi)元素

一個基本的彈出層應該滿足以下需求：

1、點擊按鈕/鏈接觸發(fā)彈出層，彈出層應該有半透明的遮罩層；

2、點擊彈出層的關(guān)閉按鈕、取消按鈕或者遮罩層會關(guān)閉隱藏彈出層；

3、使用Esc鍵也可以關(guān)閉彈出層；

4、它是響應式的，并且兼容現(xiàn)代主流瀏覽器。

HTML

1、首先我們在頁面放置一個用來觸發(fā)彈出層的鏈接，也可以是個按鈕button，注意的是我們給它設(shè)置一個data-show-layer屬性，這個屬性值對應的就是彈出層的id，也就是說通過data-show-layer來關(guān)聯(lián)彈出層。

2、很顯然，上面的鏈接關(guān)聯(lián)的彈出層的id是hw-layer。那好，選擇我們來準備彈出層hw-layer的html代碼。

3、我們彈出層的最外層，也就是遮罩層.hw-overlay，我們會使用CSS控制它是一個半透明的層，用來隔開彈出層和頁面主體內(nèi)容。r然后在.hw-layer-wrap主體層內(nèi)，我們可以設(shè)置彈出層的內(nèi)容，當然內(nèi)容由你來定，我們本文結(jié)合實例彈出層的內(nèi)容是一個確認對話框，類似window的confirm()。內(nèi)容使用了bootstrap的col-*柵格布局，還用了glyphicon字體圖標。其實最關(guān)鍵的就是需要遮罩層和主體層，內(nèi)容可以根據(jù)項目需求自定義，因為它可能是個表單、也可能是個純文字說明的內(nèi)容。

CSS

1、CSS也是關(guān)鍵的部分，我們先設(shè)置遮罩層，它默認情況下應該是不可見的，位置上fixed固定的，并且是覆蓋整個頁面的，它還是半透明的，我們這里設(shè)置了背景黑色、透明度0.3，如background-color: rgba(0,0,0,0.3)。然后主體層.hw-layer-wrap，我們設(shè)置它的寬度，計算它的位置。寬度我們可以預設(shè)一個值，高度由于內(nèi)容多少不確定，這里我們不用設(shè)置一個具體的值，在后面的js部分會對高度處理，然后設(shè)置居中以及邊框陰影等效果。有關(guān)水平和垂直居中的設(shè)置可以參閱Helloweba文章：如何讓DIV水平和垂直居中。彈出層里面的內(nèi)容樣式可以自由設(shè)置，最后就是使用media query來設(shè)置小屏幕下的彈出層居中的問題。

2、我們使用jQuery來處理觸發(fā)彈出層和關(guān)閉彈出層效果，應此需要預先加載jQuery庫。showLayer(id)是一個自定義的函數(shù)，用來展示彈出層。當點擊按鈕或鏈接調(diào)用這個showLayer(id)函數(shù)，它會漸現(xiàn)的效果展示，并且計算彈出層的高度位移距離，使得彈出主體層水平和垂直方向的居中。而函數(shù)hideLayer()就是隱藏彈出層，fadeOut()或者hide()就能實現(xiàn)。最后再加上觸發(fā)遮罩層的時候關(guān)閉彈出層以及使用Esc按鈕的時候關(guān)閉彈出層的代碼。

3、其實到這里，一個基本的彈出層效果已經(jīng)做好了。我們這里只是做一個基本的彈出層，你也可以進行繼續(xù)擴展代碼。我們看過很多彈出層插件，很多都是動態(tài)直接操作DOM的，也就是通過js代碼先createElement，然后在將內(nèi)容append到body里的，這種方式如果是頻繁操作DOM的話會消耗一定的性能，所以從性能角度考慮的話，我推薦使用本文提供的彈出層方式。

網(wǎng)站欄目：jquery彈出層,jquery自帶的彈出框
網(wǎng)頁URL：http://www.chinadenli.net/article8/dscdoop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、軟件開發(fā)、靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站導航、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)