{"id":337,"date":"2014-05-14T11:30:01","date_gmt":"2014-05-14T03:30:01","guid":{"rendered":"https:\/\/muki.tw\/wordpress\/?post_type=tech&#038;p=337"},"modified":"2024-09-30T00:08:17","modified_gmt":"2024-09-29T16:08:17","slug":"responsive-css3-lightbox-without-javascript","status":"publish","type":"post","link":"https:\/\/muki.tw\/responsive-css3-lightbox-without-javascript\/","title":{"rendered":"\u5229\u7528\u7d14 CSS3 \u505a\u51fa\u81ea\u9069\u61c9\u7684 lightbox"},"content":{"rendered":"\n<p>\u56e0\u70ba\u5de5\u4f5c\u9700\u6c42\uff0c\u8981\u505a\u4e00\u500b\u4f7f\u7528\u8aaa\u660e\u9801\u3002\u4f46\u300c\u4f7f\u7528\u8aaa\u660e\u300d\u4e26\u975e\u9019\u500b\u6848\u5b50\u7684\u4e3b\u8981\u9700\u6c42\uff0c\u6240\u4ee5\u6c7a\u5b9a\u5229\u7528 Lightbox \u53d6\u4ee3\u591a\u505a\u4e00\u9801 HTML\uff0c\u4f46\u4f7f\u7528\u529f\u80fd\u5f37\u5927\u7684 Lightbox plugin \u6709\u4e9b\u5927\u6750\u5c0f\u7528\uff0c\u6240\u4ee5\u601d\u8003\u4e86\u4e00\u4e0b\uff0c\u6c7a\u5b9a\u4f7f\u7528\u7d14 CSS3 \u5beb\u4e00\u500b\u7c21\u55ae\u3001\u53c8\u80fd\u81ea\u9069\u61c9\u7684 Lightbox\u3002<\/p>\n\n\n\n<p>\u95dc\u65bc\u300c\u7d14 CSS\u300d\u5230\u5e95\u6709\u4ec0\u9ebc\u597d\u8655\uff1f\u9019\u908a\u5c31\u4e0d\u518d\u8d05\u8ff0\u4e86\uff0c\u7c21\u55ae\u597d\u4e0a\u624b\u3001\u8b80\u53d6\u901f\u5ea6\u5feb\u7b97\u662f\u5169\u5927\u7279\u9ede\uff1b\u96d6\u7136\u4e0d\u662f\u6240\u6709\u700f\u89bd\u5668\u90fd\u652f\u63f4 CSS3\uff0c\u4f46\u6211\u9019\u500b\u6848\u5b50\u662f\u61c9\u7528\u5728\u624b\u6a5f\u4e0a\uff0c\u57fa\u672c\u4e0a\u6c92\u6709\u624b\u6a5f\u4e0d\u652f\u63f4 CSS3\uff0c\u6240\u4ee5\u4e0d\u7528\u592a\u904e\u64d4\u5fc3\u9019\u65b9\u9762\u7684\u9700\u6c42\u3002<\/p>\n\n\n\n<p>\u4ee5\u4e0b\u5148\u653e\u4e0a\u7bc4\u4f8b\u8b93\u5927\u5bb6\u8a66\u73a9\uff0c\u9ede\u9078\u6309\u9215\u300cClick Me\u300d\u6216\u8005\u662f\u65c1\u908a\u7684\u5716\u7247\uff0c\u90fd\u53ef\u4ee5\u770b\u5230 Lightbox \u7684\u6548\u679c\u55b2\uff01<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"415\" data-theme-id=\"0\" data-slug-hash=\"sbwmf\" data-default-tab=\"result\"><\/p>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">HTML \u7d50\u69cb<\/h2>\n\n\n\n<p>\u8981\u88fd\u4f5c\u7d14 CSS \u7684 Lightbox \u4e26\u4e0d\u96e3\uff0c\u6211\u5011\u5148\u5f9e HTML \u958b\u59cb\u5beb\u8d77\u5427\uff01<br>\u95dc\u65bc\u9ede\u64ca\u5f8c\uff0c\u8981\u5c55\u958b\u54ea\u500b Lightbox\uff1f\u53ea\u9700\u5229\u7528\u76f8\u540c\u7684 <code>id<\/code> \u5373\u53ef\u505a\u5230\u3002\u6b64\u5916\u91cd\u9ede\u53ea\u6709\u4e09\u500b\u5143\u4ef6\uff0c\u5206\u5225\u70ba\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u6253\u958b Lightbox \u7684\u5143\u4ef6\uff08\u4f8b\u5982\u6309\u9215\u3001\u5716\u7247\uff09<\/li><li>Lightbox \u5c55\u958b\u5f8c\u7684\u5167\u5bb9<\/li><li>\u95dc\u9589 Lightbox \u7684\u5143\u4ef6<\/li><\/ul>\n\n\n\n<p>\u6240\u4ee5 HTML \u7d50\u69cb\u53ef\u4ee5\u9019\u9ebc\u5beb\uff1a<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;file&quot;,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;body&gt;\n  &lt;section&gt;\n    &lt;a href=&quot;#notice&quot; class=&quot;button&quot;&gt;Click Me&lt;\/a&gt;\n    &lt;a href=&quot;#notice1&quot; class=&quot;button&quot;&gt;&lt;img src=&quot;http:\/\/lorempixel.com\/100\/100\/food\/1&quot;  \/&gt;&lt;\/a&gt;\n  &lt;\/section&gt;\n\n  &lt;div class=&quot;lightbox-target&quot; id=&quot;notice&quot;&gt;\n    &lt;div class=&quot;content&quot;&gt;\n      hello world&lt;br \/&gt;&lt;a href=&quot;#&quot;&gt;Hello World&lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;a class=&quot;lightbox-close&quot; href=&quot;#&quot;&gt;&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=&quot;lightbox-target&quot; id=&quot;notice1&quot;&gt;\n    &lt;img src=&quot;http:\/\/lorempixel.com\/300\/300\/food\/1&quot; \/&gt;\n    &lt;a class=&quot;lightbox-close&quot; href=&quot;#&quot;&gt;&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;<\/pre><\/div>\n\n\n\n<p>\u9019\u908a\u7279\u5730\u5e36\u51fa <code>body<\/code> \u6a19\u7c64\uff0c\u662f\u8981\u63d0\u9192\u5927\u5bb6\uff0c\u8acb\u628a <code>lightbox-target<\/code> (Lightbox \u5c55\u958b\u5f8c\u7684\u5167\u5bb9)\u62c9\u51fa\u4f86\uff0c\u5beb\u5728 <code>body<\/code> \u7684\u5b50\u5c64\u3002<\/p>\n\n\n\n<p>\u5927\u5bb6\u53ef\u4ee5\u60f3\u50cf\u4e00\u4e0b\uff0c\u6b63\u5e38\u9ede\u9078 Lightbox \u5f8c\uff0c\u6574\u500b\u87a2\u5e55\u90fd\u6703\u9ed1\u6389\uff0cLightbox \u6703\u51fa\u73fe\u5728\u87a2\u5e55\u7684\u6b63\u4e2d\u592e\u624d\u662f\u6b63\u78ba\u7684\u3002\u5982\u679c\u5c07 <code>lightbox-target<\/code> \u5305\u5728\u4efb\u4f55\u7684<code>div<\/code>\u88e1\uff0c\u5c31\u6703\u53d7\u5230\u8a72 <code>div<\/code> \u7684\u5b9a\u4f4d\u6216\u5bec\u5ea6\u9650\u5236\uff0c\u8b93\u4f60\u7684 Lightbox \u4f4d\u7f6e\u8b8a\u5f97\u5f88\u8a6d\u7570\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u770b\u4e0d\u592a\u61c2\u6c92\u95dc\u4fc2\uff0c\u8b93\u6211\u5011\u505a\u6210\u5716\u89e3\u5427\uff01<\/p>\n\n\n\n<p> \u25bc \u6b63\u5e38\u7684 Lightbox<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized size-large\"><img decoding=\"async\" src=\"https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good.png\" alt=\"\" class=\"wp-image-339\" width=\"800\" srcset=\"https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good.png 800w, https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good-150x70.png 150w, https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good-768x359.png 768w, https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good-440x206.png 440w, https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good-680x318.png 680w, https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-good-300x140.png 300w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p> \u25bc \u932f\u4f4d\u7684 Lightbox<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-bad.png\" alt=\"\" class=\"wp-image-338\" width=\"800\" srcset=\"https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-bad.png 800w, https:\/\/muki.tw\/wordpress\/wp-content\/uploads\/2015\/05\/lightbox-demo-bad-300x140.png 300w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>\u56e0\u70ba\u6211\u5011\u6703\u5229\u7528 <code>lightbox-target<\/code> \u88fd\u4f5c\u900f\u660e\u7684\u8986\u84cb\u5e95\u5c64\uff0c\u6240\u4ee5\u900f\u904e\u5716\u89e3\uff0c\u61c9\u8a72\u53ef\u4ee5\u6e05\u695a\u77ad\u89e3\u4ed6\u5011\u7684\u5dee\u7570\u5427\uff01\u7e3d\u4e4b <code>lightbox-target<\/code> \u7684\u4f4d\u7f6e\u6703\u5f71\u97ff\u5230\u6574\u500b\u7248\u9762\u5c31\u5c0d\u4e86 XD<\/p>\n\n\n\n<p>\u4ee5\u4e0a\u5c31\u662f Lightbox \u7684 HTML \u7d50\u69cb\uff0c\u63a5\u4e0b\u4f86\u8981\u4f7f\u7528 CSS \u505a\u51fa Lightbox \u7684\u5c55\u958b\u8207\u95dc\u9589\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS \u6a23\u5f0f\u8207\u5beb\u6cd5<\/h2>\n\n\n\n<p>\u6a23\u5f0f\u7684\u90e8\u5206\uff0c\u6703\u5206\u6210\u4ee5\u4e0b\u5e7e\u500b\u5340\u584a\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>lightbox-target<\/code>\uff1aLightbox \u7684\u9ed1\u5e95\u80cc\u666f\uff0c\u5373\u4fd7\u7a31\u7684 overlay<\/li><li><code>content<\/code> \u4ee5\u53ca <code>img<\/code>\uff1a\u8a2d\u5b9a\u8df3\u51fa Lightbox \u6642\uff0c\u51fa\u73fe\u7684\u5167\u5bb9\u6216\u5716\u7247\u6a23\u5f0f<\/li><li><code>lightbox-target:target<\/code>\uff1a\u6211\u5011\u5229\u7528 <code>:target<\/code> \u8a2d\u5b9a\u7576\u300c\u9ede\u9078\u7684\u5143\u4ef6\u8b8a\u70ba\u76ee\u6a19\u6642\u300d\uff0c\u6703\u51fa\u73fe\u7684 CSS \u6a23\u5f0f\u3002<\/li><li><code>lightbox-close<\/code>\uff1a\u95dc\u9589 Lightbox \u7684\u300cX\u300d\u6a23\u5f0f\u3002<\/li><\/ul>\n\n\n\n<p>\u53ef\u4ee5\u53c3\u8003\u6211\u7684 CSS \u5beb\u6cd5\uff08\u6211\u6709\u5728\u88e1\u9762\u52a0\u4e0a\u8a3b\u89e3\uff0c\u5927\u5bb6\u53ef\u4ee5\u53c3\u8003\u76f8\u95dc\u8a3b\u89e3\u6b50\uff09\uff1a<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;file&quot;,&quot;fullScreenButton&quot;:false,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;SCSS&quot;,&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.lightbox-target {\n  \/* \u8a2d\u5b9a\u597d\u80cc\u666f\u5c64\u7684\u6a23\u5f0f\u4ee5\u53ca\u4f4d\u7f6e *\/\n  position: fixed;\n  top: -100%;\n  width: 100%;\n  background: rgba(0,0,0,.7);\n\n  \/* \u9810\u8a2d\u900f\u660e\u5ea6\u70ba 0\uff0c\u89f8\u767c :target \u5f8c\uff0c\u5229\u7528\u52d5\u756b\u6548\u679c\u8abf\u6574\u900f\u660e\u5ea6 *\/\n  opacity: 0;\n  @include transition(opacity .5s ease-in-out);\n  overflow: hidden;\n  .content {\n    \/* \u8a2d\u5b9a\u5167\u5bb9\u7684\u6a23\u5f0f\u53ca\u4f4d\u7f6e(\u767d\u5e95\u5340\u584a) *\/\n\twidth: 90%;\n\theight: 90%;\n\tbackground: #fff;\n\tcolor: #333;\n\tmargin: auto;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tborder: 3px solid #fff;\n\t@include box-shadow(0 0 8px rgba(0,0,0,.3));\n\tbox-sizing: border-box;\n\n\t\/* \u9810\u8a2d\u5bec\u9ad8\u70ba 0\uff0c\u89f8\u767c :target \u5f8c\uff0c\u5229\u7528\u52d5\u756b\u6548\u679c\u5c55\u958b\u5bec\u8207\u9ad8 *\/\n\tmax-height: 0%;\n\tmax-width: 0%;\n\t@include transition(.5s ease-in-out);\n\t}\n  img {\n\t\/* \u8a2d\u5b9a\u5716\u7247\u7684\u6a23\u5f0f\u53ca\u4f4d\u7f6e\uff0c\u5229\u7528 *\/\n\tmargin: auto;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tborder: 3px solid #fff;\n\t@include box-shadow(0 0 8px rgba(0,0,0,.3));\n\tbox-sizing: border-box;\n\n\t\/* \u9810\u8a2d\u5bec\u9ad8\u70ba 0\uff0c\u89f8\u767c :target \u5f8c\uff0c\u5229\u7528\u52d5\u756b\u6548\u679c\u5c55\u958b\u5bec\u8207\u9ad8 *\/\n\tmax-height: 0%;\n\tmax-width: 0%;\n\t@include transition(.5s ease-in-out);\n  }\n\n  \/* \u7576 :target \u89f8\u767c\u5f8c\uff0cindex-target \u7684\u900f\u660e\u5ea6\u70ba 1\uff1bcontent &amp; img \u7684\u5bec\u9ad8\u70ba 100% *\/\n  &amp;:target {\n    opacity: 1;\n\ttop: 0;\n\tbottom: 0;\n\t.content, img {\n\t  max-height: 100%;\n\t  max-width: 100%;\n\t}\n\t.lightbox-close {\n\t  top: 5%;\n\t}\n  }\n}\n\n\/* \u95dc\u9589 Lightbox \u6309\u9215\u7684\u4f4d\u7f6e\u53ca\u6a23\u5f0f *\/\n.lightbox-close {\n  display: block;\n  width: 50px;\n  height: 50px;\n  box-sizing: border-box;\n  background: #139dd7;\n  color: #fff;\n  position: absolute;\n  top: 10%;\n  right: 5%;\n  @include transition(.5s ease-in-out);\n\n  \/* \u5229\u7528\u507d\u5143\u7d20\u505a\u51fa \\ \u4ee5\u53ca \/ \u7684\u7dda\u689d\uff0c\u5408\u4f75\u5c31\u8b8a\u6210 X \u56c9 *\/\n  &amp;:before, &amp;:after {\n\tcontent: &quot; &quot;;\n\tdisplay: block;\n\theight: 30px;\n\twidth: 1px;\n\tbackground: #fff;\n\tposition: absolute;\n\tleft: 26px;\n\ttop: 10px;\n\t@include transform(rotate(45deg));\n  }\n  &amp;:after {\n\t@include transform(rotate(-45deg));\n  }\n}<\/pre><\/div>\n\n\n\n<p>\u5229\u7528 HTML \u8ddf CSS \u5c31\u53ef\u4ee5\u5f88\u5feb\u901f\u7684\u505a\u51fa\u7c21\u6613\u7684 Lightbox \u56c9\uff0c\u800c\u4e14\u53ef\u4ee5\u652f\u63f4 HTML\uff0c\u6216\u662f\u55ae\u7d14\u7684\u5c55\u793a\u5716\u7247\uff0c\u975e\u5e38\u597d\u7528\u5462\uff01\uff01\uff01<\/p>\n\n\n\n<p>\u6709\u8208\u8da3\u7684\u670b\u53cb\uff0c\u4e5f\u53ef\u4ee5\u81ea\u884c\u4fee\u6539 Lightbox \u7684\u6a23\u5f0f\uff0c\u8b93\u4ed6\u66f4\u7b26\u5408\u6bcf\u500b\u7db2\u7ad9\u7684\u9700\u6c42 \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u56e0\u70ba\u5de5\u4f5c\u9700\u6c42\uff0c\u8981\u505a\u4e00\u500b\u4f7f\u7528\u8aaa\u660e\u9801\u3002\u4f46\u300c\u4f7f\u7528\u8aaa\u660e\u300d\u4e26\u975e\u9019\u500b\u6848\u5b50\u7684\u4e3b\u8981\u9700\u6c42\uff0c\u6240\u4ee5\u6c7a\u5b9a\u5229\u7528 Lightbox \u53d6\u4ee3\u591a\u505a\u4e00\u9801 HTML\uff0c\u4f46\u4f7f\u7528\u529f\u80fd\u5f37\u5927\u7684 Lightbox plugin \u6709\u4e9b\u5927\u6750\u5c0f\u7528\uff0c\u6240\u4ee5\u601d\u8003\u4e86\u4e00\u4e0b\uff0c\u6c7a\u5b9a\u4f7f\u7528\u7d14 CSS3 \u5beb\u4e00\u500b\u7c21\u55ae\u3001\u53c8\u80fd\u81ea\u9069\u61c9\u7684 Lightbox\u3002<\/p>\n","protected":false},"author":1,"featured_media":339,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[403,15],"class_list":["post-337","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","tag-css-","tag-css-lang"],"acf":[],"_links":{"self":[{"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/posts\/337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":1,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":5515,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/posts\/337\/revisions\/5515"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/media\/339"}],"wp:attachment":[{"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/muki.tw\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}