{"id":317,"date":"2012-11-22T11:26:00","date_gmt":"2012-11-22T03:26:00","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=317"},"modified":"2012-12-26T18:03:09","modified_gmt":"2012-12-26T10:03:09","slug":"ublue-jquery-dialog-perfectly-compatible-with-ie6","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/ublue-jquery-dialog-perfectly-compatible-with-ie6.html","title":{"rendered":"Ublue jQuery \u5f39\u51fa\u6846 \u59cb\u7ec8\u5782\u76f4\u4e8e\u5c4f\u5e55\u4e2d\u95f4 \u5b8c\u7f8e\u517c\u5bb9IE6"},"content":{"rendered":"

\u4eca\u5929\u7ee7\u7eed\u548c\u5927\u5bb6\u5206\u4eab\u4e00\u4e2ajQuery\u5f39\u51fa\u6846\u7684\u4ee3\u7801\u3002\u4ee3\u7801\u672c\u8eab\u5f88\u7b80\u5355\uff0c\u6700\u5173\u952e\u7684\u95ee\u9898\u5c31\u5728\u4e8e\u517c\u5bb9\u6027\u65b9\u9762\u3002<\/p>\n

HTML CODE:<\/strong><\/p>\n

\r\n<a class="popBtn" href="javascript:void(0)">Click Me<\/a>\r\n\r\n<div class="popLayer">\r\n\t<div class="popLayerTit">\r\n\t\t<h2>Title<\/h2>\r\n\t\t<i class="close">[ \u5173\u95ed ]<\/i>\r\n\t<\/div>\r\n\t<div class="popLayerCon">\r\n\t\t<p>Text or Other content<\/p>\r\n\t<\/div>\r\n<\/div>\r\n<div class="maskLayer"><\/div>\r\n<\/pre>\n
<\/p>\n
CSS CODE:<\/strong><\/p>\n
\r\n<style type="text\/css">\r\n*{ margin:0; padding:0;}\r\nhtml{ background-image:url(body_bg.jpg);}\r\nbody{ font-size:12px; font-family:Arial; height:2000px;}\r\na{ text-decoration:none;}\r\n\r\n.popBtn{ display:block; width:100px; margin:0 auto; text-align:center; padding:10px 0; color:#211F1E; border:1px solid #E59300; background:#F2BA00; text-shadow:1px 1px 1px #FAE585; border-radius:2px; box-shadow:0 1px 3px rgba(0,0,0,0.5);}\r\n.popBtn:hover{ color:#EEC000; border:1px solid #000; background:#1A1818; text-shadow:1px 1px 1px #000;}\r\n\r\n.popLayer{ display:none; width:500px; border:2px solid #000; border-bottom:3px solid #000; background:#000; border-radius:2px; box-shadow:0 3px 6px rgba(0,0,0,0.5); position:fixed; left:50%; top:50%; z-index:999; \r\n\t_top:expression(eval(\r\n\t\tdocument.compatMode && document.compatMode=='CSS1Compat') ?\r\n\t\tdocumentElement.scrollTop + (document.documentElement.clientHeight- this.offsetHeight)\/2 : \r\n\t\tdocument.body.scrollTop + (document.body.clientHeight - this.clientHeight)\/2\r\n\t);\r\n}\r\n.popLayerTit{ width:100%; height:30px; color:#E19E00;margin-bottom:1px; background:#151515;}\r\n.popLayerTit h2{ padding:5px 10px; font-size:14px; text-shadow:1px 1px 1px #000;}\r\n.popLayerTit .close{ font-style:normal; cursor:pointer; position:absolute; top:7px; right:7px; text-shadow:0 0 3px rgba(255,213,0,0.8);}\r\n.popLayerCon{ padding:10px; line-height:20px; color:#D4CFC0; border-top:1px solid #272626; ; background:#1B1919;}\r\n.popLayerCon p{ text-indent:24px;}\r\n\r\n.maskLayer{ display:none; width:100%; height:100%; position:absolute; top:0px; left:0px; background:#DF7A00; opacity:.1;}\r\n\r\n.info{ font:14px\/30px "Electrolize","Microsoft YaHei",Arial,Tahoma; width:100%; color:#E1A800; text-shadow:1px 1px 1px #000; text-align:center; margin:80px auto;}\r\n.info a{ color:#E1A800;}\r\n<\/style>\r\n<!--[if IE 6]>\r\n<style type="text\/css">\r\nbody{ background-image:url(about:blank);background-attachment:fixed;}\r\n.maskLayer{ filter:alpha(opacity=10);}\r\n<\/style>\r\n<![endif]--> \r\n<\/pre>\n
JS CODE:<\/strong><\/p>\n
\r\n\/*!\r\n * Ublue jQuery Dialog\r\n * Copyright (c) 2011, \u68a6\u5e7b\u795e\u5316 \r\n * http:\/\/www.bluesdream.com\r\n *\r\n * CreateTime: 2011.10.14\r\n * \r\n * \u8bf7\u4fdd\u7559\u6b64\u4fe1\u606f\uff0c\u5982\u679c\u60a8\u6709\u4fee\u6539\u6216\u610f\u89c1\u53ef\u901a\u8fc7\u7f51\u7ad9\u7ed9\u6211\u7559\u8a00\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7\u90ae\u4ef6\u5f62\u5f0f\u8054\u7cfb\u672c\u4eba\u3002\r\n * Mail: hello@bluesdream.com\r\n *\/\r\n$(function(){\r\n\tvar $popBtn = $(".popBtn");\r\n\tvar $popLayer = $(".popLayer");\r\n\tvar $maskLayer = $(".maskLayer");\r\n\tvar $popLayerClose = $(".close");\r\n\tvar $popLayerTop = -($popLayer.outerHeight() \/ 2);\r\n\tvar $popLayerLeft = -($popLayer.outerWidth() \/ 2);\r\n\tvar $pageH = $(document).height(); \/\/IE6\u4e0d\u652f\u6301height:100%\uff0c\u6240\u4ee5\u4e3a\u906e\u7f69\u80cc\u666f\u8bbe\u4e00\u4e2a\u56fa\u5b9a\u9ad8\u5ea6\r\n\r\n\t$popBtn.click(function(){ \/\/\u70b9\u51fb\u6309\u94ae\r\n\t\t$maskLayer.css({ "height":$pageH }).show(); \/\/\u663e\u793a\u906e\u7f69\u5c42\r\n\t\tif ($.browser.msie && ($.browser.version == "6.0") && !$.support.style) { \/\/\u5224\u65adIE6\r\n\t\t\t$popLayer.css({ "position":"absolute","marginLeft":( $popLayerLeft ) }).show();\r\n\t\t}else{\r\n\t\t\t$popLayer.css({ "marginTop":( $popLayerTop ),"marginLeft":( $popLayerLeft ) }).show();\r\n\t\t};\r\n\t});\r\n\r\n\tfunction cancelBubble(event) { \/\/\u963b\u6b62\u4e8b\u4ef6\u5192\u6ce1\r\n\t\tevent.stopPropagation();\r\n\t};\r\n\tfunction hideLyaer(event) {\r\n\t\t$popLayer.hide();\r\n\t\t$maskLayer.hide();\r\n\t};\r\n\t$popBtn.click(cancelBubble);\r\n\t$popLayer.click(cancelBubble);\r\n\t$popLayerClose.click(hideLyaer);\r\n\t$(document).click(hideLyaer);\r\n\r\n});\r\n<\/pre>\n
Demo<\/a>Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u4eca\u5929\u7ee7\u7eed\u548c\u5927\u5bb6\u5206\u4eab\u4e00\u4e2ajQuery\u5f39\u51fa\u6846\u7684\u4ee3\u7801\u3002\u4ee3\u7801\u672c\u8eab\u5f88\u7b80\u5355\uff0c\u6700\u5173\u952e\u7684\u95ee\u9898\u5c31\u5728\u4e8e\u517c\u5bb9\u6027\u65b9\u9762\u3002 HTML CODE: <a class="popBtn" href="javascript:void(0)">Click Me<\/a> <div class="popLayer"> <div class="popLayerTit"> <h2>Title<\/h2> <i class="close">[ \u5173\u95ed ]<\/i> <\/div> <div class="popLayerCon"> <p>Text or Other content<\/p> <\/div> <\/div> <div class="maskLayer"><\/div><\/p>\n","protected":false},"author":1,"featured_media":319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[20,76,78,71,29],"class_list":["post-317","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-css","tag-css3","tag-html","tag-jquery","tag-original"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/317"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/317\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/319"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}