{"id":91,"date":"2017-04-15T13:42:11","date_gmt":"2017-04-15T05:42:11","guid":{"rendered":"http:\/\/av16874667.imwork.net:13582\/?p=91"},"modified":"2017-04-15T13:42:11","modified_gmt":"2017-04-15T05:42:11","slug":"html-%e8%87%aa%e5%ae%9a%e4%b9%89alert","status":"publish","type":"post","link":"https:\/\/www.dd-home.top\/?p=91","title":{"rendered":"Html \u81ea\u5b9a\u4e49Alert"},"content":{"rendered":"<p><!--more--><\/p>\n<p>\u4f7f\u7528\u65b9\u6cd5<\/p>\n<pre class=\"brush:js;toolbar:false\">$.myalert({\n \u00a0 \u00a0 \u00a0 \u00a0content : \"\u6d4b\u8bd5alert\",\n \u00a0 \u00a0 \u00a0 \u00a0confirm_btn_click : function(e) { \/\/ \u786e\u8ba4\u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n \u00a0 \u00a0 \u00a0 \u00a0$.myalert(\"getDialog\").mydialog(\"hide\");\n \u00a0 \u00a0}\n});<\/pre>\n<p>css\u6587\u4ef6<\/p>\n<pre class=\"brush:css;toolbar:false\">.my-confirm-box {\n\tbackground-color: #E2E2E2;\n\t-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);\n\t-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);\n\t\/*-moz-border-radius: 10px;\n\t -webkit-border-radius: 10px; *\/\n\tposition: absolute;\n\tz-index: 5000;\n}\n\n.my-confirm-box .my-confirm-divider {\n\theight: 1px;\n\tbackground-color: #e5e5e5;\n\tmargin-top: 2px;\n\tmargin-bottom: 2px;\n\tz-index: 40001;\n}\n\n.my-confirm-box .my-confirm-title {\n\twidth: 100%;\n\ttext-align: center;\n\tfont-size: 1.0rem;\n\tfont-size: 1.0em9;\n\ttext-align: left;\n\tpadding-top: 10px;\n\tpadding-bottom: 10px;\n\tcolor: #1eb3d6;\n\t\/* margin: 1.5rem 0 1rem;\n\tmargin: 1.5em 0 1em9; *\/\n\tborder-bottom: 1px solid #1fb3d2;\n}\n\n.my-confirm-box .my-confirm-content {\n\ttext-align: center;\n\tfont-size: 1rem;\n\tfont-size: 1em9;\n\tpadding-top: 15px;\n\tpadding-bottom: 15px;\n\tmargin-bottom: 3rem;\n\tmargin-bottom: 3em9;\n\t\/*margin: 0 2.5rem 3.5rem;\n\t margin: 0 2.5em9 4.5em9; *\/\n}\n\n.my-confirm-box .my-confirm-button-wrap {\n\t\n}\n\n.my-confirm-box button {\n\tbackground: transparent;\n\tborder: none;\n\theight: 3rem;\n\theight: 3em9;\n\tfont-size: 1rem;\n\tfont-size: 1em9;\n\twidth: 50%;\n\tposition: absolute;\n\tbottom: 0;\n\tdisplay: block;\n\ttext-align: center;\n\tborder-top: 1px solid #B4B4B4;\n\tcursor: pointer;\n\tcolor: #565656;\n}\n\n.my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-right {\n\tright: 0;\n\tborder-radius: 0 0 10px 0;\n}\n\n.my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-left {\n\tleft: 0;\n\tborder-right: 1px solid #B4B4B4;\n\tborder-radius: 0 0 0 10px;\n}\n\n.my-confirm-box .my-confirm-button-wrap button:focus, .my-confirm-box .my-confirm-button-wrap button:hover {\n\t\/* font-weight: bold;\n\tbackground: #EFEFEF; *\/\n}\n\n.my-confirm-box .my-confirm-button-wrap button:active {\n\t\/* background: #D6D6D6; *\/\n}\n\n.my-confirm-box .my-confirm-button-wrap button.my-confirm-btn-full-width {\n\twidth: 100%;\n\tborder-radius: 0 0 10px 10px;\n}\n\n.my-loading-box {\n\tbackground-color: #E2E2E2;\n\t-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);\n\t-moz-border-radius: 10px;\n\t-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);\n\tcolor: #000;\n\t-webkit-border-radius: 10px;\n\tposition: absolute;\n\tz-index: 5000;\n\ttext-align: center;\n\tmin-width: 10em;\n\tpadding: 15px;\n}\n\n.my-loading-box .my-loading-img {\n\tbackground-image: url('loading.gif');\n\theight: 31px;\n\twidth: 31px;\n\tmargin: 0 auto;\n}\n\n.my-loading-box .my-loading-title {\n\tfont-size: 1rem;\n\tfont-size: 1rem9;\n\tpadding-top: 5px;\n}<\/pre>\n<p>js\u6587\u4ef6<\/p>\n<pre class=\"brush:js;toolbar:false\">(function($) {\n\tvar my_dialog_plug_name = \"mydialog\", my_confirm_plug_name = \"myconfirm\";\n\tvar my_alert_plug_name = \"myalert\", my_loading_plug_name = \"myloading\";\n\tvar my_confirm_box, my_loading_box;\n\tfunction MyJqDialog(element, options) {\n\t\tthis.init(element, options);\n\t}\n\n\tMyJqDialog.prototype.init = function(element, options) {\n\t\tvar defaults = {\n\t\t\tautoShow : false,\n\t\t\t\"zIndex\" : 4000\n\t\t};\n\t\tthis.element = element;\n\t\tthis.settings = $.extend({}, defaults, options);\n\n\t\tvar overlay_css = {\n\t\t\t\"width\" : \"100%\",\n\t\t\t\"height\" : \"100%\",\n\t\t\t\"filter\" : \"alpha(opacity=40)\",\n\t\t\t\"-moz-opacity\" : \"0.4\",\n\t\t\t\"-khtml-opacity\" : \"0.4\",\n\t\t\t\"opacity\" : \"0.4\",\n\t\t\t\"background\" : \"#000\",\n\t\t\t\"position\" : \"absolute\",\n\t\t\t\"top\" : \"0\",\n\t\t\t\"left\" : \"0\",\n\t\t\t\"z-index\" : \"3000\",\n\t\t\t\"display\" : \"none\"\n\t\t};\n\t\tthis.overlay = $(\"&lt;div\/&gt;\").css(overlay_css).appendTo($(\"body\"));\n\t\tthis.element.css({\n\t\t\t\"z-index\" : this.settings.zIndex,\n\t\t\tposition : \"absolute\"\n\t\t});\n\t\tvar _this = this;\n\t\t$(window).resize(function() {\n\t\t\t\/\/ only do it if the dialog box is not hidden\n\t\t\tif (!$('#dialog-box').is(':hidden'))\n\t\t\t\t_this.resizeBox();\n\t\t});\n\t\t$(window).scroll(function() {\n\t\t\t_this.resizeBox();\n\t\t});\n\t\tif (this.settings.autoShow) {\n\t\t\tthis.show();\n\t\t}\n\t};\n\n\tMyJqDialog.prototype.show = function() {\n\t\t\/\/ transition effect\n\t\tthis.overlay.fadeIn(200);\n\t\tthis.overlay.fadeTo(\"slow\", 0.8);\n\t\t\/\/ transition effect\n\t\tthis.element.fadeIn(500);\n\t\tthis.resizeBox();\n\t};\n\n\tMyJqDialog.prototype.hide = function() {\n\t\tthis.element.hide();\n\t\tthis.overlay.hide();\n\t};\n\n\tMyJqDialog.prototype.resizeBox = function() {\n\t\tvar box = this.element;\n\n\t\t\/\/ Get the screen height and width\n\t\tvar maskHeight = $(document).height();\n\t\tvar maskWidth = $(document).width();\n\n\t\t\/\/ Set height and width to mask to fill up the whole screen\n\t\t$(this.overlay).css({\n\t\t\t'width' : maskWidth,\n\t\t\t'height' : maskHeight\n\t\t});\n\n\t\t\/\/ Get the window height and width\n\t\tvar winH = $(window).height();\n\t\tvar winW = $(window).width();\n\t\tvar scrollT = $(window).scrollTop();\n\t\tvar scrollL = $(window).scrollLeft();\n\n\t\t\/\/ Set the popup window to center\n\t\tbox.css('top', winH \/ 2 - box.height() \/ 2 + scrollT);\n\t\tbox.css('left', winW \/ 2 - box.width() \/ 2 + scrollL);\n\t};\n\n\t$.fn[my_dialog_plug_name] = function(options) {\n\t\tvar elt;\n\t\tif (options instanceof Object || !this.data(\"plugin_\" + my_dialog_plug_name)) {\n\t\t\telt = new MyJqDialog(this, options);\n\t\t\tthis.data('plugin_' + my_dialog_plug_name, elt);\n\t\t} else {\n\t\t\telt = this.data(\"plugin_\" + my_dialog_plug_name);\n\t\t}\n\t\tif (typeof (options) == \"string\" &amp;&amp; options.length &gt; 0) {\n\t\t\teval(\"elt.\" + options + \"(this)\");\n\t\t}\n\t\treturn this;\n\t};\n\n\tfunction MyJqMyConfirm(options) {\n\t\tthis.init(options);\n\t}\n\tMyJqMyConfirm.prototype = {\n\t\tinit : function(options) {\n\t\t\tvar _this = this;\n\n\t\t\tthis.element = options.confirm_box;\n\t\t\tvar width = $(document).width();\n\t\t\twidth = width * 0.8;\n\t\t\tvar defaults = {\n\t\t\t\twidth : width + \"px\",\n\t\t\t\tcancelButton : true,\n\t\t\t\tconfirmButton : true,\n\t\t\t\ttitle : \"&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;\u63d0\u793a\",\n\t\t\t\tcancel_btn_title : \"\u53d6\u6d88\",\n\t\t\t\tconfirm_btn_title : \"\u786e\u8ba4\",\n\t\t\t\tcancel_btn_click : function(e) {\n\t\t\t\t\t_this.element[my_dialog_plug_name](\"hide\");\n\t\t\t\t},\n\t\t\t\tconfirm_btn_click : function(e) {\n\t\t\t\t\t_this.element[my_dialog_plug_name](\"hide\");\n\t\t\t\t}\n\t\t\t};\n\t\t\tif (typeof options === 'undefined')\n\t\t\t\toptions = {};\n\t\t\tthis.settings = $.extend({}, defaults, options);\n\n\t\t\tthis.confirm_box_css = {\n\t\t\t\twidth : this.settings.width\n\t\t\t};\n\t\t\tthis.element.css(this.confirm_box_css);\n\n\t\t\tthis.element.find(\".my-confirm-title\").html(this.settings.title);\n\t\t\tthis.content = this.element.find(\".my-confirm-content\").html(this.settings.content);\n\t\t\tthis.element.find(\".my-confirm-button-wrap\").html(\"\");\n\t\t\tif (this.settings.cancelButton &amp;&amp; this.settings.confirmButton) {\n\t\t\t\tvar cancel = $(\"&lt;button class='my-confirm-btn-left' id='my-confirm-btn-cancel'&gt;\" + this.settings.cancel_btn_title + \"&lt;\/button&gt;\");\n\t\t\t\tvar confirm = $(\"&lt;button class='my-confirm-btn-right' id='my-confirm-btn-confirm'&gt;\" + this.settings.confirm_btn_title + \"&lt;\/button&gt;\");\n\t\t\t\tcancel.click(function(e) {\n\t\t\t\t\t_this.settings.cancel_btn_click(e);\n\t\t\t\t});\n\t\t\t\tconfirm.click(function(e) {\n\t\t\t\t\t_this.settings.confirm_btn_click(e);\n\t\t\t\t});\n\t\t\t\tcancel.appendTo(this.element.find(\".my-confirm-button-wrap\"));\n\t\t\t\tconfirm.appendTo(this.element.find(\".my-confirm-button-wrap\"));\n\t\t\t} else if (this.settings.confirmButton) {\n\t\t\t\tvar confirm = $(\"&lt;button id='my-confirm-btn-confirm' class='my-confirm-btn-full-width'&gt;\" + this.settings.confirm_btn_title + \"&lt;\/button&gt;\");\n\t\t\t\tconfirm.click(function() {\n\t\t\t\t\t_this.settings.confirm_btn_click(this);\n\t\t\t\t});\n\t\t\t\tconfirm.appendTo(this.element.find(\".my-confirm-button-wrap\"));\n\t\t\t} else if (this.settings.cancelButton) {\n\t\t\t\tvar cancel = $(\"&lt;button id='my-confirm-btn-cancel' class='my-confirm-btn-full-width'&gt;\" + this.settings.cancel_btn_title + \"&lt;\/button&gt;\");\n\t\t\t\tcancel.click(function() {\n\t\t\t\t\t_this.settings.cancel_btn_click(this);\n\t\t\t\t});\n\t\t\t\tcancel.appendTo(this.element.find(\".my-confirm-button-wrap\"));\n\t\t\t}\n\t\t\tthis.element[my_dialog_plug_name](\"show\");\n\t\t}\n\t};\n\t$[my_confirm_plug_name] = function(options) {\n\t\tif (my_confirm_box == null) {\n\t\t\tmy_confirm_box = $(\"&lt;div class='my-confirm-box'&gt;&lt;h1 class='my-confirm-title'&gt;&lt;\/h1&gt;&lt;div class='my-confirm-content'&gt;&lt;\/div&gt;&lt;div class='my-confirm-button-wrap'&gt;&lt;\/div&gt;&lt;\/div&gt;\");\n\t\t\t$(\"body\").append(my_confirm_box);\n\t\t}\n\t\tif (typeof (options) == \"string\" &amp;&amp; options == \"getDialog\") {\n\t\t\treturn my_confirm_box;\n\t\t}\n\t\tif (typeof options === 'undefined') {\n\t\t\toptions = {};\n\t\t}\n\t\toptions.confirm_box = my_confirm_box;\n\t\tnew MyJqMyConfirm(options);\n\t};\n\t$[my_alert_plug_name] = function(options) {\n\t\tif (my_confirm_box == null) {\n\t\t\tmy_confirm_box = $(\"&lt;div class='my-confirm-box'&gt;&lt;div class='my-confirm-title'&gt;&lt;\/div&gt;&lt;div class='my-confirm-content'&gt;&lt;\/div&gt;&lt;div class='my-confirm-button-wrap'&gt;&lt;\/div&gt;&lt;\/div&gt;\");\n\t\t\t$(\"body\").append(my_confirm_box);\n\t\t}\n\t\tif (typeof (options) == \"string\" &amp;&amp; options == \"getDialog\") {\n\t\t\treturn my_confirm_box;\n\t\t}\n\t\tif (typeof options === 'undefined') {\n\t\t\toptions = {};\n\t\t}\n\t\toptions.confirm_box = my_confirm_box;\n\t\toptions.cancelButton = false;\n\t\toptions.confirmButton = true;\n\t\tnew MyJqMyConfirm(options);\n\t};\n\n\tfunction MyJqMyLoad(options) {\n\t\tthis.init(options);\n\t}\n\tMyJqMyLoad.prototype = {\n\t\tinit : function(options) {\n\t\t\tvar _this = this;\n\n\t\t\tthis.element = options.loading_box;\n\t\t\tvar width = $(document).width();\n\t\t\twidth = width * 0.5;\n\t\t\tvar defaults = {\n\t\t\t\twidth : width + \"px\",\n\t\t\t\ttitle : \"\u6b63\u5728\u5904\u7406\uff0c\u8bf7\u7a0d\u540e...\"\n\t\t\t};\n\t\t\tif (typeof options === 'undefined')\n\t\t\t\toptions = {};\n\t\t\tthis.settings = $.extend({}, defaults, options);\n\n\t\t\tthis.confirm_box_css = {\n\t\t\t\twidth : this.settings.width\n\t\t\t};\n\t\t\tthis.element.css(this.confirm_box_css);\n\n\t\t\tthis.element.find(\".my-loading-title\").html(this.settings.title);\n\t\t\tthis.element[my_dialog_plug_name](\"show\");\n\t\t}\n\t};\n\t$[my_loading_plug_name] = function(options) {\n\t\tif (my_loading_box == null) {\n\t\t\tmy_loading_box = $(\"&lt;div class='my-loading-box'&gt;&lt;div class='my-loading-img'&gt;&lt;\/div&gt;&lt;div class='my-loading-title'&gt;&lt;\/div&gt;&lt;\/div&gt;\");\n\t\t\t$(\"body\").append(my_loading_box);\n\t\t}\n\t\tif (typeof (options) == \"string\" &amp;&amp; options == \"getDialog\") {\n\t\t\treturn my_loading_box;\n\t\t}\n\t\tif (typeof options === 'undefined') {\n\t\t\toptions = {};\n\t\t}\n\t\toptions.loading_box = my_loading_box;\n\t\tnew MyJqMyLoad(options);\n\t};\n}(jQuery));<\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36],"tags":[],"class_list":["post-91","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/www.dd-home.top\/index.php?rest_route=\/wp\/v2\/posts\/91","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dd-home.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dd-home.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dd-home.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dd-home.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=91"}],"version-history":[{"count":0,"href":"https:\/\/www.dd-home.top\/index.php?rest_route=\/wp\/v2\/posts\/91\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dd-home.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=91"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dd-home.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=91"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dd-home.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=91"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}