0

Our revised pure CSS modal works OK in virtually all eReaders I've tested (at least on the eReaders I needed to attain good results). The page code does have a very minor "onclick" JS. The modal is designed to function using a fallback method when various eReaders do not allow, nor use, JS functionality. In other words, the fallback operates like a footnote, jumping over to another page (or location) where the footnote is readable, then click a 'return' button to return to the original location on the first page.

The mere 65 code lines of CSS code are working well as we needed it to (its based on code from a 'CSS-tricks' and 'codepen' posts). We tested it in Firefox developer mode (switching JS on/off) and the fallback anchor works as intended.

Tested results: ADE (ok), PocketBook (ok), Aldiko (ok), Moon+ (ok), some would use the 'onClick', while others use the fallback 'ahref' jump-to anchor.

Our final test was in Kobo (our preferred market of choice for this particular product). Bummer moment hit us here, for when we changed the extension to xxx.kepub.epub, then loaded it, and tried it, the code flounders. Its not failing in the absolute sense (for the modal still fires as intended; it's just not where it should be (at the screen we are on right now). I can find the popup when we slide back left to the beginning of that page section to find it, and there the popup is, plainly visible, sitting over the first top part of the page (this page is on a very long long page with lots of text).

This entire virtual CSS popup modal works as intended in the other major eReaders I tested it in yet....fails in this one eReader (Kobo) which has an engine based on RMSKD, the same software engine all the other ones are based on too.

I will post the entire code below. Perhaps someone can solve this odd riddle with the code malfunction inside Kobo eReader App. This pure CSS modal with this slight glitch should be solvable; it would be great to get this convenient modal code to function as intended.

Page 1 is below.

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>x</title>
<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  z-index: 2;
}

.modal-overlay:target {
  visibility: visible;
  opacity: 1;
}

.modal {
  display: block;
  width: 500px;
  max-width: 85%;
  height: 400px;
  max-height: 100%;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
  box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);
  border-radius: 5px;
  z-index: 3;
}

.modal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  height: 100%;
  height: 21em;
  max-height: 21em;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 30px 10px 10px 10px;
}

.modal .close {
  position: absolute;
  top: 0px;
  right: 40%;
  font-size: 2.5em;
  font-weight: bold;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
  transition: all 100ms;
  background: rgba(240,240,240,0.8);
  z-index: 5;
}
    </style>
</head>

<body>
<span id="Page1"></span>
<div class="w3-container">
<div class="w3-panel">
<p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
<p>This is a CSS popup modal, that has its own fallback ahref tag when the eReader does not recognize javascript. To install read <a href="section-02.xhtml#note-001" id="myNoteReturn" class="button" onclick="window.location.replace('#myNote'); return false;">[1] How To</a> for details about this process.</p>
<!--modal on page 1, while the ahref fallback anchor takes you to page 2-->
<div id="myNote" class="modal-overlay">
    <div class="modal">
    <div class="modal-content">
        <h3 class="w3-xlarge">Sync</h3>
        <a class="close" href="#myNoteReturn" onclick="window.location.replace('#myNoteReturn'); return false;">&#215;</a>
        <a href="https://www.bookshop.org/" target="_blank" class="button">Bookshop</a> web link.<br></br>
        <p><b>Step 1:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
        <p><b>Step 2:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.
        </p>
        </div>
    </div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.</p>
</div><!-- END -->
</div><!-- END -->
</body>
</html>

The next is Page 2:

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>x</title>
<link href="" rel='stylesheet' type='text/css' />
<style>
/* override */
p a#myNoteReturn, 
p.footnote a,
p.content a,
div.popup a
{padding:3px 16px; border: 1px solid #aaa; margin-bottom:5px;}
</style>
</head>

<body>
<span id="Page2"></span>
<div class="w3-container">
<div class="w3-panel">
<!-- footnote -->
<h2 class="w3-xlarge w3-padding-small">How to Lorem ipsum dolor eReader:</h2>
    <p class="footnote" epub:type="footnote"><a id="note-001" href="section-01.xhtml#myNoteReturn" class="">[1] Return to main section</a>&#160;&#160;</p>
    <br></br>
    <p class="content">
    <a href="https://www.bookshop.org/" target="_blank" class="button">Bookshop</a> web link<br></br>
    <b>Step 1:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.<br></br>
    <b>Step 2:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula dolor vitae eros molestie facilisis. Cras cursus nisl eget mauris posuere vulputate. Duis adipiscing pulvinar molestie. Etiam massa ipsum, vestibulum a convallis ut, tempor ut odio. Sed ac magna nisi.
    </p>
</div><!-- END -->
</div><!-- END -->
</body>
</html>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.