jquery 弹出层效果实例代码(1/2)
这是提供二款jquery 弹出层效果实例代码哦，如果你正在找jquery弹出层代码就进来下载吧，如果你喜欢使用jquery就来看看这款弹出层与js弹出层有什么区别吧。
js代码
/*弹出自定义隐藏框
<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秒后自动淡出*/
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.zzzyk.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.zzzyk.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</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() });
};
/*确认框 cancel回调为可选*/
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.zzzyk.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</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() });
};
1 2
补充：网页制作,jquery
