【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": "

本文来源:http://www.gdgbn.com/wangyezhizuo/29652/