【www.gdgbn.com--jquery】
//上面这一部分主要功能是修改弹出层的默认样式 //----------==================================华丽的分割线================================--- 1 //blockui extend function
2 //以下三个方法在页面调用时,给点按钮或者文字添加onlick事件调用
3 //confirm delete or any other events
4 //1,该方法弹出带有确认与取消两个按钮的层,点击确认触发clickevent()方法
5 $.confirm = function(settings) {
6 var htmldom = $("");
7 htmldom.css教程({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
8 var msg = $("" + settings.msg + "");
9 htmldom.append(msg);
10 msg.find("#confirmbutton").click(settings.clickevent);
11 $.blockui({
12 message: htmldom,
13 css: { width: "650px", height: "70px", "background-color": "#fff" }
14 });
15 pressescout();
16 }
17 这个截图就是上面的confrim()方法的效果。有一个确认按钮,然后有一个取消按钮。 调用也很简单 1 $(function(){
2 var settings={
3 msg:"确认删除选中的记录?", //要在弹出层上显示的消息
4 clickevent:function(){
5 //do something 此处是给确定按钮绑定方法
6 }}
7 $.confirm(settings); //此处调用方法,然后把上面的定义的settings对象做为参数传入 8 }); 上面这个方法点击取消或者确认按钮后页面是无刷新的,但是有时候操作之后需要刷新页面那就用下面这个方法,调用方法跟上面的一致,只是方法名变了而已。 1 $.confirmwithrefresh = function(settings) {
2 var htmldom = $("");
3 htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
4 var msg = $("" + settings.msg + "");
5 htmldom.append(msg);
6 msg.find("#confirmbutton").click(settings.clickevent);
7 $.blockui({
8 message: htmldom,
9 css: { width: "650px", height: "70px", "background-color": "#fff" }
10 });
11 pressescout();
12 }
13 //对于有些页面关闭层时不需要刷新页面,所以采用不同的关闭方式
14 $.confirmnorefresh = function(settings) {
15 var htmldom = $("");
16 htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
17 var msg = $("" + settings.msg + "");
18 htmldom.append(msg);
19 msg.find("#confirmbutton").click(settings.clickevent);
20 $.blockui({
21 message: htmldom,
22 css: { width: "650px", height: "70px", "background-color": "#fff" }
23 });
24 pressescout(); 25 }
上面的方法只是提示作用,显示一个消息。这比alert()可好看多了吧 调用方法 $.prompt({msg:"删除成功"}); 下面的方法就是刷新页面的了 1 $.promptwithrefresh = function(settings) {
2 var htmldom = $("");
3 htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
4 htmldom.append("" + settings.msg + "");
5 $.blockui({
6 message: htmldom,
7 css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.basez }
8 });
9 pressescout();
10 }
11 $.promptwithrefreshoverride = function(settings) {
12 var htmldom = $("");
13 htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
14 var msg = $("" + settings.msg + "");
15 htmldom.append(msg);
16 msg.find("#confirm").click(settings.clickevent);
17 $.blockui({
18 message: htmldom,
19 css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.basez }
20 });
21 pressescout();
22 }
23 //弹出提示框无刷新
24 $.promptnorefresh = function(settings) {
25 var htmldom = $("");
26 htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
27 htmldom.append("" + settings.msg + "");
28 $.blockui({
29 message: htmldom,
30 css: { width: "550px", height: "70px", "background-color": "#fff", "z-index": settings.basez }
31 });
32 pressescout(); 33 } //该方法弹出添加或者修改的层,调用时需要传一个dom以及层的标题。方法分别是formtitle(),appendtable(),且该方法有确认与取消两个按钮,确认按钮事件需要在页面js中重写方法是clickevent() 1 $.msgbox = function(settings) {
2 var temps教程creen = (document.body.clientwidth - settings.width.replace("px", "")) / 2;
3 var htmldom = $("");
4 var msg = $("" + settings.title + "关闭" + settings.dom + " ");
5 htmldom.append(msg);
6 msg.parent().find("#confirmbutton").click(settings.clickevent);
7 $.blockui({
8 message: htmldom,
9 css: { width: settings.width, "background-color": "#fff", "z-index": settings.basez, left: tempscreen }
10 });
11 pressescout();
12 } 这个方法就比较强大了,可以传一个dom进来。 看着挺像人人网的弹出层吧,样式确实是模仿的人人网的。 调用方法也还是先定义一个对象。给属性赋值.属性有哪些看看上面的代码中settings.xxxx 这xxxxx就是属性。还可以根据自己的需要去添加,或者减少。 var settings={ title:"添加用户", //标题 width:"600px", clickevent:function(){ //do something } } $.msgbox(settings); 1 //该方法弹出添加或者修改的层,调用时需要传一个dom以及层的标题。方法分别是formtitle(),appendtable(),且该方法有确认与取消两个按钮,确认按钮事件需要在页面js中重写方法是clickevent()
2 $.msgboxwithrefresh = function(settings) {
3 var tempscreen = (document.body.clientwidth - settings.width.replace("px", "")) / 2;
4 var htmldom = $("");
5 var msg = $("" + settings.title + "关闭" + settings.dom + " ");
6 htmldom.append(msg);
7 msg.parent().find("#confirmbutton").click(settings.clickevent);
8 $.blockui({
9 message: htmldom,
10 css: { width: settings.width, "background-color": "#fff", "z-index": settings.basez, left: tempscreen }
11 });
12 pressescout();
13 }
14 //关闭blcokui,该方法为默认方法,不需要变动。
15 function closeblockui() {
16 $.unblockui();
17 location.reload();
18 return false;
19 }
20 //关闭blockui但不刷新页面
21 function closeblockuinofresh() {
22 $.unblockui();
23 }
24 function pressescout() {
25 $("*").keypress(function(event) {
26 var jianzhi = event.keycode;
27 var input_keydown = $(this);
28 switch (jianzhi) {
29 case 27:
30 closeblockuinofresh();
31 break;
32 }
33 });
34 }
35
保存成js文件
; (function($) {
if (/1.(0|1|2).(0|1|2)/.test($.fn.jquery) || /^1.1/.test($.fn.jquery)) {
alert("blockui requires jquery v1.2.3 or later! you are using v" + $.fn.jquery);
return;
}
$.fn._fadein = $.fn.fadein;
var noop = function() { };
// this bit is to ensure we don"t call setexpression when we shouldn"t (with extra muscle to handle
// retarded useragent strings on vista)
var mode = document.documentmode || 0;
var setexpr = $.browser.msie && (($.browser.version < 8 && !mode) || mode < 8);
var ie6 = $.browser.msie && /msie 6.0/.test(navigator.useragent) && !mode;
// global $ methods for blocking/unblocking the entire page
$.blockui = function(opts) { install(window, opts); }; //open method
$.unblockui = function(opts) { remove(window, opts); }; //close method
// convenience method for quick growl-like notifications (http://www.google.com/search?q=growl)
$.growlui = function(title, message, timeout, onclose) {
var $m = $("");
if (title) $m.append("
" + title + "
");if (message) $m.append("
" + message + "
");if (timeout == undefined) timeout = 3000;
$.blockui({
message: $m, fadein: 700, fadeout: 1000, centery: false,
timeout: timeout, showoverlay: false,
onunblock: onclose,
css: $.blockui.defaults.growlcss
});
};
// plugin method for blocking element content
$.fn.block = function(opts) {
return this.unblock({ fadeout: 0 }).each(function() {
if ($.css(this, "position") == "static")
this.style.position = "relative";
if ($.browser.msie)
this.style.zoom = 1; // force "haslayout"
install(this, opts);
});
};
// plugin method for unblocking element content
$.fn.unblock = function(opts) {
return this.each(function() {
remove(this, opts);
});
};
$.blockui.version = 2.35; // 2nd generation blocking at no extra cost!
// override these in your code to change the default behavior and style
$.blockui.defaults = {//弹出层的默认样式
// message displayed when blocking (use null for no message)
message: "
please wait...
", title: null, // title string; only used when theme == true
draggable: true, // only used when theme == true (requires jquery-ui.js to be loaded)
theme: false, // set to true to use with jquery ui themes
// styles for the message when blocking; if you wish to disable
// these and use an external stylesheet then do this in your code:
// $.blockui.defaults.css = {};
css: {
padding: 0,
margin: 0,
width: "30%",
top: "40%",
left: "35%",
textalign: "center",
color: "#000",
border: "3px solid #aaa",
backgroundcolor: "#fff",
cursor: "wait"
},
// minimal style set used when themes are used
themedcss: {
width: "30%",
top: "40%",
left: "35%"
},
// styles for the overlay
overlaycss: {//遮罩背景颜色及透明度修改
backgroundcolor: "#ccc",
opacity: 0.4,
cursor: "wait"
},
// styles applied when using $.growlui
growlcss: {
width: "350px",
top: "10px",
left: "",
right: "10px",
border: "none",
padding: "5px",
opacity: 0.6,
cursor: "default",
color: "#fff",
backgroundcolor: "#000",
"-webkit-border-radius": "10px",
"-moz-border-radius": "10px",
"border-radius": "10px"
},
// ie issues: "about:blank" fails on https and javascript:false is s-l-o-w
// (hat tip to jorge h. n. de vasconcelos)
iframesrc: /^https/i.test(window.location.href || "") ? "javascript:false" : "about:blank",
// force usage of iframe in non-ie browsers (handy for blocking applets)
forceiframe: false,
// z-index for the blocking overlay
basez: 999,
// set these to true to have the message automatically centered
centerx: true, // <-- only effects element blocking (page block controlled via css above)
centery: true,
// allow body element to be stetched in ie6; this makes blocking look better
// on "short" pages. disable if you wish to prevent changes to the body height
allowbodystretch: true,
// enable if you want key and mouse events to be disabled for content that is blocked
bindevents: true,
// be default blockui will supress tab navigation from leaving blocking content
// (if bindevents is true)
constraintabkey: true,
// fadein time in millis; set to 0 to disable fadein on block
fadein: 200,
// fadeout time in millis; set to 0 to disable fadeout on unblock
fadeout: 400,
// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
timeout: 0,
// disable if you don"t want to show the overlay
showoverlay: true,
// if true, focus will be placed in the first available input field when
// page blocking
focusinput: true,
// suppresses the use of overlay styles on ff/linux (due to performance issues with opacity)
applyplatformopacityrules: true,
// callback method invoked when fadein has completed and blocking message is visible
onblock: null,
// callback method invoked when unblocking has completed; the callback is
// passed the element that has been unblocked (which is the window object for page
// blocks) and the options that were passed to the unblock call:
// onunblock(element, options)
onunblock: null,
// don"t ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeoffsethack: 4,
// class name of the message block
blockmsgclass: "blockmsg"
};
// private data and functions follow...
var pageblock = null;
var pageblockels = [];
function install(el, opts) {
var full = (el == window);
var msg = opts && opts.message !== undefined ? opts.message : undefined;
opts = $.extend({}, $.blockui.defaults, opts || {});
opts.overlaycss = $.extend({}, $.blockui.defaults.overlaycss, opts.overlaycss || {});
var css = $.extend({}, $.blockui.defaults.css, opts.css || {});
var themedcss = $.extend({}, $.blockui.defaults.themedcss, opts.themedcss || {});
msg = msg === undefined ? opts.message : msg;
// remove the current block (if there is one)
if (full && pageblock)
remove(window, { fadeout: 0 });
// if an existing element is being used as the blocking content then we capture
// its current place in the dom (and current display style) so we can restore
// it when we unblock
if (msg && typeof msg != "string" && (msg.parentnode || msg.jquery)) {
var node = msg.jquery ? msg[0] : msg;
var data = {};
$(el).data("blockui.history", data);
data.el = node;
data.parent = node.parentnode;
data.display = node.style.display;
data.position = node.style.position;
if (data.parent)
data.parent.removechild(node);
}
var z = opts.basez;
// blockui uses 3 layers for blocking, for simplicity they are all used on every platform;
// layer1 is the iframe layer which is used to supress bleed through of underlying content
// layer2 is the overlay layer which has opacity and a wait cursor (by default)
// layer3 is the message content that is displayed while blocking
var lyr1 = ($.browser.msie || opts.forceiframe)
? $("")
: $("");
var lyr2 = $("");
var lyr3, s;
if (opts.theme && full) {
s = "" +
"" + (opts.title || " ") + "" +
"" +
"";
}
else if (opts.theme) {
s = "" +
"" + (opts.title || " ") + "" +
"" +
"";
}
else if (full) {
s = "";
}
else {
s = "";
}
lyr3 = $(s);
// if we have a message, style it
if (msg) {
if (opts.theme) {
lyr3.css(themedcss);
lyr3.addclass("ui-widget-content");
}
else
lyr3.css(css);
}
// style the overlay
if (!opts.applyplatformopacityrules || !($.browser.mozilla && /linux/.test(navigator.platform)))
lyr2.css(opts.overlaycss);
lyr2.css("position", full ? "fixed" : "absolute");
// make iframe layer transparent in ie
if ($.browser.msie || opts.forceiframe)
lyr1.css("opacity", 0.0);
//$([lyr1[0],lyr2[0],lyr3[0]]).appendto(full ? "body" : el);
var layers = [lyr1, lyr2, lyr3], $par = full ? $("body") : $(el);
$.each(layers, function() {
this.appendto($par);
});
if (opts.theme && opts.draggable && $.fn.draggable) {
lyr3.draggable({
handle: ".ui-dialog-titlebar",
cancel: "li"
});
}
// ie7 must use absolute positioning in quirks mode and to account for activex issues (when scrolling)
var expr = setexpr && (!$.boxmodel || $("object,embed", full ? null : el).length > 0);
if (ie6 || expr) {
// give body 100% height
if (full && opts.allowbodystretch && $.boxmodel)
$("html,body").css("height", "100%");
// fix ie6 issue when blocked element has a border width
if ((ie6 || !$.boxmodel) && !full) {
var t = sz(el, "bordertopwidth"), l = sz(el, "borderleftwidth");
var fixt = t ? "(0 - " + t + ")" : 0;
var fixl = l ? "(0 - " + l + ")" : 0;
}
// simulate fixed position
$.each([lyr1, lyr2, lyr3], function(i, o) {
var s = o[0].style;
s.position = "absolute";
if (i < 2) {
full ? s.setexpression("height", "math.max(document.body.scrollheight, document.body.offsetheight) - (jquery.boxmodel?0:" + opts.quirksmodeoffsethack + ") + "px"")
: s.setexpression("height", "this.parentnode.offsetheight + "px"");
full ? s.setexpression("width", "jquery.boxmodel && document.documentelement.clientwidth || document.body.clientwidth + "px"")
: s.setexpression("width", "this.parentnode.offsetwidth + "px"");
if (fixl) s.setexpression("left", fixl);
if (fixt) s.setexpression("top", fixt);
}
else if (opts.centery) {
if (full) s.setexpression("top", "(document.documentelement.clientheight || document.body.clientheight) / 2 - (this.offsetheight / 2) + (blah = document.documentelement.scrolltop ? document.documentelement.scrolltop : document.body.scrolltop) + "px"");
s.margintop = 0;
}
else if (!opts.centery && full) {
var top = (opts.css && opts.css.top) ? parseint(opts.css.top) : 0;
var expression = "((document.documentelement.scrolltop ? document.documentelement.scrolltop : document.body.scrolltop) + " + top + ") + "px"";
s.setexpression("top", expression);
}
});
}
// show the message
if (msg) {
if (opts.theme)
lyr3.find(".ui-widget-content").append(msg);
else
lyr3.append(msg);
if (msg.jquery || msg.nodetype)
$(msg).show();
}
if (($.browser.msie || opts.forceiframe) && opts.showoverlay)
lyr1.show(); // opacity is zero
if (opts.fadein) {
var cb = opts.onblock ? opts.onblock : noop;
var cb1 = (opts.showoverlay && !msg) ? cb : noop;
var cb2 = msg ? cb : noop;
if (opts.showoverlay)
lyr2._fadein(opts.fadein, cb1);
if (msg)
lyr3._fadein(opts.fadein, cb2);
}
else {
if (opts.showoverlay)
lyr2.show();
if (msg)
lyr3.show();
if (opts.onblock)
opts.onblock();
}
// bind key and mouse events
bind(1, el, opts);
if (full) {
pageblock = lyr3[0];
pageblockels = $(":input:enabled:visible", pageblock);
if (opts.focusinput)
settimeout(focus, 20);
}
else
center(lyr3[0], opts.centerx, opts.centery);
if (opts.timeout) {
// auto-unblock
var to = settimeout(function() {
full ? $.unblockui(opts) : $(el).unblock(opts);
}, opts.timeout);
$(el).data("blockui.timeout", to);
}
};
// remove the block
function remove(el, opts) {
var full = (el == window);
var $el = $(el);
var data = $el.data("blockui.history");
var to = $el.data("blockui.timeout");
if (to) {
cleartimeout(to);
$el.removedata("blockui.timeout");
}
opts = $.extend({}, $.blockui.defaults, opts || {});
bind(0, el, opts); // unbind events
var els;
if (full) // crazy selector to handle odd field errors in ie6/7
els = $("body").children().filter(".blockui").add("body > .blockui");
else
els = $(".blockui", el);
if (full)
pageblock = pageblockels = null;
if (opts.fadeout) {
els.fadeout(opts.fadeout);
settimeout(function() { reset(els, data, opts, el); }, opts.fadeout);
}
else
reset(els, data, opts, el);
};
// move blocking element back into the dom where it started
function reset(els, data, opts, el) {
els.each(function(i, o) {
// remove via dom calls so we don"t lose event handlers
if (this.parentnode)
this.parentnode.removechild(this);
});
if (data && data.el) {
data.el.style.display = data.display;
data.el.style.position = data.position;
if (data.parent)
data.parent.appendchild(data.el);
$(el).removedata("blockui.history");
}
if (typeof opts.onunblock == "function")
opts.onunblock(el, opts);
};
// bind/unbind the handler
function bind(b, el, opts) {
var full = el == window, $el = $(el);
// don"t bother unbinding if there is nothing to unbind
if (!b && (full && !pageblock || !full && !$el.data("blockui.isblocked")))
return;
if (!full)
$el.data("blockui.isblocked", b);
// don"t bind events when overlay is not in use or if bindevents is false
if (!opts.bindevents || (b && !opts.showoverlay))
return;
// bind anchors and inputs for mouse and key events
var events = "mousedown mouseup keydown keypress";
b ? $(document).bind(events, opts, handler) : $(document).unbind(events, handler);
// former impl...
// var $e = $("a,:input");
// b ? $e.bind(events, opts, handler) : $e.unbind(events, handler);
};
// event handler to suppress keyboard/mouse events when blocking
function handler(e) {
// allow tab navigation (conditionally)
if (e.keycode && e.keycode == 9) {
if (pageblock && e.data.constraintabkey) {
var els = pageblockels;
var fwd = !e.shiftkey && e.target === els[els.length - 1];
var back = e.shiftkey && e.target === els[0];
if (fwd || back) {
settimeout(function() { focus(back) }, 10);
return false;
}
}
}
var opts = e.data;
// allow events within the message content
if ($(e.target).parents("div." + opts.blockmsgclass).length > 0)
return true;
// allow events for content that is not being blocked
return $(e.target).parents().children().filter("div.blockui").length == 0;
};
function focus(back) {
if (!pageblockels)
return;
var e = pageblockels[back === true ? pageblockels.length - 1 : 0];
if (e)
e.focus();
};
function center(el, x, y) {
var p = el.parentnode, s = el.style;
var l = ((p.offsetwidth - el.offsetwidth) / 2) - sz(p, "borderleftwidth");
var t = ((p.offsetheight - el.offsetheight) / 2) - sz(p, "bordertopwidth");
if (x) s.left = l > 0 ? (l + "px") : "0";
if (y) s.top = t > 0 ? (t + "px") : "0";
};
function sz(el, p) {
return parseint($.css(el, p)) || 0;
};
})(jquery);
//---------------------------------------blockui part end-----------------------------------
//change blockui default settings
//change blockui border
$.blockui.defaults.css.border = "5px solid #ccc";
$.blockui.defaults.css.cursor = "default";
$.blockui.defaults.css.top = "20%";
$.blockui.defaults.css.left = "30%";
$.blockui.defaults.overlaycss.cursor = "default";
//change fadeout effact speed
$.blockui.defaults.fadeout = 100;
$.blockui.defaults.fadein = 100;
//----------==================================华丽的分割线================================---
//blockui extend function
//以下三个方法在页面调用时,给点按钮或者文字添加onlick事件调用
//confirm delete or any other events
//1,该方法弹出带有确认与取消两个按钮的层,点击确认触发clickevent()方法
$.confirm = function(settings) {
var htmldom = $("");
htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "70px" });
var msg = $("" + settings.msg + "");
htmldom.append(msg);
msg.find("#confirmbutton").click(settings.clickevent);
$.blockui({
message: htmldom,
css: { width: "650px", height: "70px", "background-color": "#fff" }
});
pressescout();
}
$.confirmwithrefresh = function(settings) {
var htmldom = $("");
htmldom.css({ "text-align": "center", "vertical-align": "middle", "line-height": "