Показ обложки в модальном окне с использованием только HTML5+CSS

diff --git a/www/styles/style-default.css b/www/styles/style-default.css
index 434cff68c0a0207b0bdef59e22407797567071b1..b8166b8b1dd342186a01e00fd659b31bcd5ac3ed 100644 (file)
--- a/www/styles/style-default.css
+++ b/www/styles/style-default.css
@@ -392,4 +392,63 @@ body {  margin: 5px;
             font-size: 0.85em;/*12px/16px */
             font-weight:400; /* Better supported than 'lighter' attribute */
     }
-}
\ No newline at end of file
+}
+
+
+
+.modalDialog {
+       position: fixed;
+       font-family: Arial, Helvetica, sans-serif;
+       top: 0;
+       right: 0;
+       bottom: 0;
+       left: 0;
+       background: rgba(0,0,0,0.8);
+       z-index: 99999;
+       opacity:0;
+       -webkit-transition: opacity 400ms ease-in;
+       -moz-transition: opacity 400ms ease-in;
+       transition: opacity 400ms ease-in;
+       pointer-events: none;
+}
+
+.modalDialog:target {
+       opacity:1;
+       pointer-events: auto;
+}
+
+.modalDialog > div {
+       width: 400px;
+       position: relative;
+       margin: 10% auto;
+       padding: 5px 20px 13px 20px;
+       border-radius: 10px;
+       background: #fff;
+       background: -moz-linear-gradient(#fff, #999);
+       background: -webkit-linear-gradient(#fff, #999);
+       background: -o-linear-gradient(#fff, #999);
+}
+
+
+
+.close {
+       background: #606061;
+       color: #FFFFFF;
+       line-height: 25px;
+       position: absolute;
+       right: -12px;
+       text-align: center;
+       top: -10px;
+       width: 24px;
+       text-decoration: none;
+       font-weight: bold;
+       -webkit-border-radius: 12px;
+       -moz-border-radius: 12px;
+       border-radius: 12px;
+       -moz-box-shadow: 1px 1px 3px #000;
+       -webkit-box-shadow: 1px 1px 3px #000;
+       box-shadow: 1px 1px 3px #000;
+}
+
+.close:hover { background: #00d9ff; }
+

diff --git a/www/styles/style-eink.css b/www/styles/style-eink.css
index 815b1eb272f4d0f5ee8ebb7a95529f826e1157b5..d35b344e26b1fb2a6a64ed7769a68746918717b0 100644 (file)
--- a/www/styles/style-eink.css
+++ b/www/styles/style-eink.css
@@ -398,4 +398,60 @@ body {  margin: 5px;
             font-size: 0.85em;/*12px/16px */
             font-weight:400; /* Better supported than 'lighter' attribute */
     }
-}
\ No newline at end of file
+}
+
+.modalDialog {
+        position: fixed;
+        font-family: Arial, Helvetica, sans-serif;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background: rgba(0,0,0,0.8);
+        z-index: 99999;
+        opacity:0;
+        -webkit-transition: opacity 400ms ease-in;
+        -moz-transition: opacity 400ms ease-in;
+        transition: opacity 400ms ease-in;
+        pointer-events: none;
+}
+
+.modalDialog:target {
+        opacity:1;
+        pointer-events: auto;
+}
+
+.modalDialog > div {
+        width: 400px;
+        position: relative;
+        margin: 10% auto;
+        padding: 5px 20px 13px 20px;
+        border-radius: 10px;
+        background: #fff;
+        background: -moz-linear-gradient(#fff, #999);
+        background: -webkit-linear-gradient(#fff, #999);
+        background: -o-linear-gradient(#fff, #999);
+}
+
+
+
+.close {
+       background: #606061;
+       color: #FFFFFF;
+       line-height: 25px;
+       position: absolute;
+       right: -12px;
+       text-align: center;
+       top: -10px;
+       width: 24px;
+       text-decoration: none;
+       font-weight: bold;
+       -webkit-border-radius: 12px;
+       -moz-border-radius: 12px;
+       border-radius: 12px;
+       -moz-box-shadow: 1px 1px 3px #000;
+       -webkit-box-shadow: 1px 1px 3px #000;
+       box-shadow: 1px 1px 3px #000;
+}
+
+.close:hover { background: #00d9ff; }

diff --git a/www/templates/default/bookdetail.html b/www/templates/default/bookdetail.html
index 84c733478c4a4faa14049ba4e019906189bfe6e5..be7e54ab7983466e8c869de558fe14eacc7fcb2b 100644 (file)
--- a/www/templates/default/bookdetail.html
+++ b/www/templates/default/bookdetail.html
@@ -1,7 +1,19 @@
 <article class="bookpopup">\r
+    {{? it.book.hasCover == 1}}\r
+    <div id="openModal" class="modalDialog">\r
+        <div>\r
+            <a href="#close" title="Close" class="close">X</a>\r
+            {{~it.book.authors:author:j}}\r
+            {{? j > 0}}, {{?}}<h3>{{=htmlEscape (author.name)}}</h3>\r
+            {{~}}\r
+            <h2>{{=htmlEscape (it.title)}}</h2>\r
+            <img src="{{=it.book.coverurl}}" alt="{{=it.const.i18n.coverAlt}}" />\r
+       </div>\r
+    </div>\r
+    {{?}}\r
     <span class="cover">\r
         {{? it.book.hasCover == 1}}\r
-        <a href="{{=it.book.coverurl}}">\r
+        <a href="#openModal">\r
           <img src="{{=it.book.thumbnailurl}}" alt="{{=it.const.i18n.coverAlt}}" />\r
         </a>\r
         {{?}}\r