参考：
JavaScript仿安卓实现toast message效果
使用jquery创建正在加载的半透明缓冲对话框，兼容ie、火狐、chome等浏览器
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
(function ($) { var my_dialog_plug_name = "mydialog", my_loading_plug_name = "myloading"; var my_loading_box; function MyJqDialog(element, options){ this.init(element, options); } MyJqDialog.prototype.init = function (element, options) { var defaults = {autoShow: false, "zIndex": 4000}; this.element = element; this.settings = $.extend( {}, defaults, options ); var overlay_css = {"width": "100%", "height": "100%", "filter": "alpha(opacity=40)", "-moz-opacity": "0.4", "-khtml-opacity": "0.4", "opacity": "0.4", "background": "#000", "position": "absolute", "top": "0", "left": "0", "z-index": "3000", "display": "none"}; this.overlay = $("<div/>").css(overlay_css).appendTo($("body")); this.element.css({"z-index": this.settings.zIndex, position: "absolute"}); var _this = this; $(window).resize(function () { //only do it if the dialog box is not hidden if (!$('#dialog-box').is(':hidden')) _this.resizeBox(); }); $(window).scroll(function () { _this.resizeBox(); }); if(this.settings.autoShow){ this.show(); } }; MyJqDialog.prototype.show = function () { //transition effect this.overlay.fadeIn(200); this.overlay.fadeTo("slow", 0.8); //transition effect this.element.fadeIn(500); this.resizeBox(); }; MyJqDialog.prototype.hide = function () { this.element.hide(); this.overlay.hide(); }; MyJqDialog.prototype.resizeBox = function () { var box = this.element; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(document).width(); //Set height and width to mask to fill up the whole screen $(this.overlay).css({'width':maskWidth,'height':maskHeight}); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); var scrollT = $(window).scrollTop(); var scrollL = $(window).scrollLeft(); //Set the popup window to center box.css('top', winH/2 - box.outerHeight()/2 + scrollT); box.css('left', winW/2 - box.width()/2 + scrollL); }; $.fn[my_dialog_plug_name] = function( options ) { var elt; if ( options instanceof Object || !this.data( "plugin_" + my_dialog_plug_name ) ) { elt = new MyJqDialog( this, options ); this.data('plugin_' + my_dialog_plug_name, elt); } else { elt = this.data( "plugin_" + my_dialog_plug_name ); } if (typeof(options) == "string" && options.length>0){ eval("elt."+options+"(this)"); } return this; }; function MyJqMyLoad(options){ this.init(options); } MyJqMyLoad.prototype = { init: function (options){ var _this = this; this.element = options.loading_box; var width = $(document).width(); width = width * 0.5; var defaults = {width: width+"px", title: "正在处理，请稍后..."}; if(typeof options === 'undefined') options = {}; this.settings = $.extend( {}, defaults, options ); this.confirm_box_css = {width: this.settings.width}; this.element.css(this.confirm_box_css); this.element.find(".my-loading-title").html(this.settings.title); this.element[my_dialog_plug_name]("show"); } }; $[my_loading_plug_name] = function(options){ if(my_loading_box == null){ my_loading_box = $("<div class='my-loading-box'><div class='my-loading-img'></div><div class='my-loading-title'></div></div>"); $("body").append(my_loading_box); } if (typeof(options) == "string" && options=="getDialog"){ return my_loading_box; } if (typeof(options) == "string" && options=="hide"){ my_loading_box.mydialog("hide"); return; } if(typeof options === 'undefined'){ options = {}; } options.loading_box = my_loading_box; new MyJqMyLoad(options); } }( jQuery )); |
css如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.my-confirm-box{background-color: #E2E2E2; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); -moz-border-radius: 10px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); -webkit-border-radius: 10px; position: absolute; z-index: 5000;} .my-confirm-box .my-confirm-title{width: 100%; text-align: center; font-size: 1.2rem; font-size: 1.2em\9; margin: 1.5rem 0 1rem; margin: 1.5em 0 1em\9;} .my-confirm-box .my-confirm-content{text-align: left; font-size: 1rem; font-size: 1em\9; margin: 0 1rem 4.5rem; margin: 0 1em 4.5em\9;} .my-confirm-box .my-confirm-button-wrap{} .my-confirm-box button {background: transparent; border: none; height: 3rem; height: 3em\9; font-size: 1rem; font-size: 1em\9; width: 50%; position: absolute; bottom: 0; display: block; text-align: center; border-top: 1px solid #B4B4B4; cursor: pointer; color: #1678E5;} .my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-right{right:0; border-radius: 0 0 10px 0;} .my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-left{left:0; border-right: 1px solid #B4B4B4; border-radius: 0 0 0 10px;} .my-confirm-box .my-confirm-button-wrap button:focus, .my-confirm-box .my-confirm-button-wrap button:hover {font-weight: bold; background: #EFEFEF;} .my-confirm-box .my-confirm-button-wrap button:active {background: #D6D6D6;} .my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-full-width{width: 100%; border-radius: 0 0 10px 10px;} .my-loading-box{background-color: #E2E2E2; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); -moz-border-radius: 10px; -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4); color: #000; -webkit-border-radius: 10px; position: absolute; z-index: 5000; text-align: center; min-width: 10em; padding: 15px;} .my-loading-box .my-loading-img{background-image: url('loading.gif'); height: 31px; width: 31px; margin: 0 auto;} .my-loading-box .my-loading-title{font-size: 1rem; font-size: 1rem\9; padding-top: 5px;} |
调用如下
|
1 2 3 4 5 6 |
$(function (){ //自定义缓冲标题 $.myloading({title: "test"}); //关闭缓冲效果 //$.myloading("hide"); }); |
Demo：查看演示
下载：查看下载