jquery實(shí)現(xiàn)居中彈出層代碼
更新時(shí)間:2010年08月25日 16:27:23 作者:
基于jquery的居中彈出層效果代碼,需要的朋友可以參考下核心的代碼。
復(fù)制代碼 代碼如下:
/*
彈出窗口定位到瀏覽器中間
1. show(options{
height:高度
width:寬度
speed:漸顯時(shí)間 默認(rèn)0
container:包含的html內(nèi)容的jquery對(duì)象
model:是否是模態(tài)窗口,默認(rèn)true,模態(tài)對(duì)話框就是在彈層下面在覆蓋遮罩層,參考上篇文章Overlay實(shí)現(xiàn)
})
2. close(speed:淡出時(shí)間 默認(rèn)0)
*/
Q.Panel = function() {
var self = this;
self._resetPosition = function() {
self._container.css("top", self._getTop());
self._container.css("left", self._getLeft());
};
self._getTop = function() {
return Q.bom.scrollY() + (Q.bom.windowHeight() - self._options.height) / 2;
};
self._getLeft = function() {
return (Q.dom.pageWidth() - self._options.width) / 2;
};
self.show = function(options) {
self._options = $.extend({
width: 350,
height: 200,
opacity: 0.5,
model: true,
speed: 0
}, options || {});
self._container = self._options.container;
var css = {
'width': self._options.width,
'height': self._options.height,
'z-index': Q.Overlay.zindex,
'position': 'absolute',
'left': self._getLeft(),
'top': self._getTop(),
'display': 'none'
};
self._container.css(css);
if (self._options.model) {
self._overlay = new Q.Overlay(self._options.opacity);
self._overlay.show();
}
$(window).scroll(self._resetPosition);
$(window).resize(self._resetPosition);
$(document.body).append(self._container);
self._container.fadeIn(self._options.speed);
Q.Overlay.zindex++; //沒(méi)彈出一次就遞增,防止多個(gè)彈層重疊
};
self.close = function(speed) {
$(window).unbind('resize', self._resetPosition);
$(window).unbind('scroll', self._resetPosition);
self._container.fadeOut(speed || 0, function() {
self._container.remove();
if (self._options.model) {
self._overlay.close();
}
});
};
};
這里居中是通過(guò)js控制的,下面是幾個(gè)用這個(gè)劇中Panel實(shí)現(xiàn)的通用對(duì)話框
復(fù)制代碼 代碼如下:
/*彈出自定義隱藏框
<div id="league" style="display:none">
<button class="close" >close</button>
</div>
Q.showPanel("league", function(panel, container) {
container.find(".close").click(function() {
panel.close();
}
);
*/
Q.showPanel = function(containerId, registerEventCallback) {
var container = $("#" + containerId);
var height = container.height();
var width = container.width();
container = container.clone(true);
var options = { height: height, width: width, container: container };
var panel = new Q.Panel();
registerEventCallback(panel, container);
panel.show(options);
};
/*彈出窗口,從url加載窗體html片段*/
Q.openWindow = function(url, data, registerEventCallback) {
$.get(url, data, function(html) {
var panelDiv = $(html);
panelDiv.hide();
$(document.body).append(panelDiv);
var options = { height: panelDiv.height(), width: panelDiv.width(), container: panelDiv };
var panel = new Q.Panel();
registerEventCallback(panel, panelDiv);
panel.show(options);
});
}
/*提示框,3秒后自動(dòng)淡出*/
Q.tips = function(msg) {
var html = '<div class="gu_layer w330">' +
'<div class="gu_layer_main">' +
'<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2>' +
'<p class="gu_layer_txt">' + msg + '</p>' +
'<div class="gu_layer_btn"></div>' +
'</div></div>'
var container = $(html);
container.hide();
$(document.body).append(container);
var panel = new Q.Panel();
panel.show({ container: container, height: container.height(), width: container.width() ,speed:500});
setTimeout(function() { panel.close(500); }, 3000);
};
/*提示框*/
Q.alert = function(msg) {
var html = '<div class="gu_layer w330">' +
'<div class="gu_layer_main">' +
'<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">關(guān)閉</a>提示</h2>' +
'<p class="gu_layer_txt">' + msg + '</p>' +
'<div class="gu_layer_btn"><a class="btn_org" href="">確 定</a></div>' +
'</div></div>'
var container = $(html);
container.hide();
$(document.body).append(container);
var panel = new Q.Panel();
container.find(".btn_tit_close").click(function() {
panel.close();
return false;
});
container.find(".btn_org").click(function() {
panel.close();
return false;
});
panel.show({ container: container, height: container.height(), width: container.width() });
};
/*確認(rèn)框 cancel回調(diào)為可選*/
Q.confirm = function(title, msg, yes, cancel) {
var html = '<div class="gu_layer w330">' +
'<div class="gu_layer_main">' +
'<h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">關(guān)閉</a>' + title + '</h2>' +
'<p class="gu_layer_txt">' + msg + '</p>' +
'<div class="gu_layer_btn"><a class="btn_org" href="">確 定</a><a class="btn_gray" href="">取 消</a></div>' +
'</div></div>'
var container = $(html);
container.hide();
$(document.body).append(container);
var panel = new Q.Panel();
container.find(".btn_tit_close").click(function() {
panel.close();
return false;
});
container.find(".btn_gray").click(function() {
if (cancel)
cancel();
panel.close();
return false;
});
container.find(".btn_org").click(function() {
if (yes)
yes();
panel.close();
return false;
});
panel.show({ container: container, height: container.height(), width: container.width() });
};
您可能感興趣的文章:
- jQuery+CSS3+Html5實(shí)現(xiàn)彈出層效果實(shí)例代碼(附源碼下載)
- Jquery+CSS3實(shí)現(xiàn)一款簡(jiǎn)潔大氣帶滑動(dòng)效果的彈出層
- jQuery Dialog 彈出層對(duì)話框插件
- jQuery彈出層始終垂直居中相對(duì)于屏幕或當(dāng)前窗口
- JQuery彈出層示例可自定義
- jQuery+html5實(shí)現(xiàn)div彈出層并遮罩背景
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- JQUERY THICKBOX彈出層插件
- jQuery Mobile彈出窗、彈出層知識(shí)匯總
- jQuery點(diǎn)縮略圖彈出層顯示大圖片
- jQuery Layer彈出層傳值到父頁(yè)面的實(shí)現(xiàn)代碼
- jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
相關(guān)文章
jquery解析XML及獲取XML節(jié)點(diǎn)名稱的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jquery解析XML及獲取XML節(jié)點(diǎn)名稱的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案
在jQuery中,$是jQuery的別名,為了書(shū)寫(xiě)方便,我們更習(xí)慣用$('#id')這一類的方式來(lái)書(shū)寫(xiě)代碼。這篇文章給大家分享jQuery中 $ 符號(hào)的沖突問(wèn)題及解決方案,感興趣的朋友一起看看吧2016-11-11跟著JQuery API學(xué)Jquery 之二 屬性
在選擇器的API學(xué)習(xí)中,走馬觀花的把選擇器過(guò)了一遍,但是選擇歸選擇,選擇出來(lái)了沒(méi)干什么事,也沒(méi)有什么用嘛2010-04-04jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 從 1.9 版開(kāi)始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support,下面我們來(lái)看下具體的使用方法2014-05-05瘋狂Jquery第一天(Jquery學(xué)習(xí)筆記)
之前一直學(xué)習(xí),現(xiàn)在終于有時(shí)間來(lái)整理一下文檔了。以下文章都是自己學(xué)習(xí)Jquery 的筆記,希望能留下痕跡,也希望能幫助到您2012-05-05jquery實(shí)現(xiàn)網(wǎng)站列表切換效果的2種方法
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)網(wǎng)站列表切換效果的2種方法,供大家參考,感興趣的小伙伴們可以參考一下2016-08-08