JSFiddle - React, Tailwind, and code Playground

by zircon

HTML

<!-- Pure CSS modal -->
<p>INFO: "Pure CSS Modal" for possible use in ADE eReader. Not tested in any other eReader software. Certain eReaders will fail to let a modal function correctly at all. Of limited use until all eReaders recognize a pure CSS modal (will likely be years).
NOTE: This pure CSS modal is for a footnote with three options to return to on the main text page. This is only for use when you have 3 ID's going to the same footnote quote and you want the option to return to any one of those 3 original ID's on the main page.</p>

<section class="content2" id="footnote123">
<p><label for="toggler" class="toggle-modal-button">Show return options</label>
Footnote of long text from an external quoted book article.</p>
</section>

<input id="toggler" class="modal-toggler" type="checkbox" aria-hidden="true"/>
<section class="modal-container">
  <label for="toggler" class="modal close-modal-area"></label>
  <div class="modal modal-box">
    <h6>Return to options:</h6>
	    <p><a href="#sourceA">Return to A</a></p>
	    <p><a href="#sourceB">Return to B</a></p>
	    <p><a href="#sourceC">Return to C</a></p>
  </div>
</section>

<h3>Main epub page text</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.</p>

<p>Go to footnote <a href="#footnote123" id="sourceA" epub:type="noteref">[A.]</a></p>
<p>Lorem ipsum dolor sit amet,...

CSS

/* --Page setup-- */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* --Modal setup-- */
.content2 {
  width: 100%;
  color: #000;
  margin: 0 auto;
}
.toggle-modal-button {
  background-color: #ded;
  color: #000;
  padding: 3px;
  cursor: pointer;
  border-radius: 0.5em;
  box-shadow: inset 0 0 1px black;
  transition: background-color 0.2s, color 0.2s, transform 0.1s linear;
}
.toggle-modal-button:hover, 
.toggle-modal-button:focus, 
.toggle-modal-button:active {
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: none;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s linear;
}
.toggle-modal-button:active {
  transform: scale(1.1);
}

/* content inside the modal */
[aria-hidden="true"] {
  display: none;
}
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
  z-index: 1;
}
.modal-toggler:checked + .modal-container {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}
.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 5px;
  border-radius: 0.5em;
  width: 100%;
}
.close-modal-area {
  width: 100%;
  height: 100%;
}
.modal-box {
  background: rgb(250, 250, 250);
  text-align: left;
  width: 50%;
}
.modal-box p {
   padding: 3px;
   margin: 0;
 }