2 files changed, 65 insertions, 6 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index b8bac63b..97462e46 100644
--- a/docs/_static/custom.js
+++ b/docs/_static/custom.js
@@ -1,11 +1,28 @@
 'use-strict';
 
+let activeModal = null;
 let activeLink = null;
 let bottomHeightThreshold, sections;
+let settings;
+
+function closeModal(modal) {
+  activeModal = null;
+  modal.style.display = 'none';
+}
+
+function openModal(modal) {
+  if (activeModal) {
+    closeModal(activeModal);
+  }
+
+  activeModal = modal;
+  modal.style.removeProperty('display');
+}
 
 document.addEventListener('DOMContentLoaded', () => {
   bottomHeightThreshold = document.documentElement.scrollHeight - 30;
   sections = document.querySelectorAll('div.section');
+  settings = document.querySelector('div#settings.modal')
 
   const tables = document.querySelectorAll('.py-attribute-table[data-move-to-id]');
   tables.forEach(table => {
@@ -25,7 +42,7 @@ window.addEventListener('scroll', () => {
   else {
     sections.forEach(section => {
       let rect = section.getBoundingClientRect();
-      if (rect.top + document.body.scrollTop - 1 < window.scrollY) {
+      if (rect.top + document.body.offsetTop < 1) {
         currentSection = section;
       }
     });
@@ -37,7 +54,14 @@ window.addEventListener('scroll', () => {
 
   if (currentSection) {
     activeLink = document.querySelector(`.sphinxsidebar a[href="#${currentSection.id}"]`);
-    activeLink.parentElement.classList.add('active');
+    if (activeLink) {
+      activeLink.parentElement.classList.add('active');
+    }
   }
+});
 
-});
\ No newline at end of file
+document.addEventListener('keydown', (event) => {
+  if (event.keyCode == 27 && activeModal) {
+    closeModal(activeModal);
+  }
+});
diff --git a/docs/_static/style.css b/docs/_static/style.css
index 059197d6..3cd20d06 100644
--- a/docs/_static/style.css
+++ b/docs/_static/style.css
@@ -1,7 +1,5 @@
 /* this stuff uses a couple of themes as a base with some custom stuff added
-
 In particular thanks to:
-
 - Alabaster for being a good base
   - Which thanks Flask + KR theme
 - Sphinx Readable Theme
@@ -58,6 +56,43 @@ div.footer a {
   text-decoration: underline;
 }
 
+div.modal {
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(0,0,0,0.4);
+  cursor: pointer;
+}
+
+div.modal-content {
+  background-color: #ffffff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.54);
+  padding: 24px;
+  border-radius: 4px;
+  margin: 20% auto;
+  width: 40%;
+  cursor: initial;
+}
+
+div.modal-content > span.close {
+  color: #888;
+  float: right;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+}
+
+div.modal-content > span.close:hover,
+div.modal-content > span.close:focus {
+  color: #444;
+}
+
 div.related {
   padding: 10px 10px;
   width: 100%;
@@ -617,4 +652,4 @@ div.code-block-caption {
     background-color: transparent;
     border-left: none;
   }
-}
+}
\ No newline at end of file