Download: Mail course subscribe prompt popup upon download button click

irgolic · Oct 21, 2019 · 22be905 · 22be905
1 parent b3c7215
commit 22be905
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 4 deletions.
diff --git a/layouts/download/list.html b/layouts/download/list.html
@@ -1,5 +1,11 @@
 {{ define "main"}}
 
+<div id="bkgOverlay" class="backgroundOverlay"></div>
+
+<div id="delayedPopup" class="delayedPopupWindow">
+    <iframe src="http://mailtrain.biolab.si/subscription/JVS_UVh-8"></iframe>
+</div>
+
 <section id="features" class="features section downloads ">
         <div class="container downloados" style="margin-top: 50px;">
             <div class="row" style="padding: 0px !important;text-align: center;">
@@ -24,12 +30,14 @@ <h2 class="content title" style="margin:20px 0px !important;">{{ .title }}</h2>
                 <div class="">
                     <div class="content">
                         <h2>Download the latest version for Windows</h2>
-                        <a id="recommended-download-win" style="margin-top: 10px" class="btn btn-warning big-button-base" href="https://service.biolab.si/download/orange?platform=win">
+                        <a id="recommended-download-win" style="margin-top: 10px" class="btn btn-warning big-button-base download-button" href="https://service.biolab.si/download/orange?platform=win">
                             Download Orange
                         </a>
 
                         <h3><a id="standalone"></a>Standalone installer (default)</h3>
-                        <a id="recommended-download" href="https://service.biolab.si/download/orange?platform=win">Orange3-Miniconda-x86_64.exe (64 bit)</a><br />
+                        <a id="recommended-download" href="https://service.biolab.si/download/orange?platform=win"
+                            class="download-button">Orange3-Miniconda-x86_64.exe
+                            (64 bit)</a><br />
                         <p>Can be used without administrative priviledges.</p>
                         <h3><a id="anaconda"></a>Anaconda</h3>
                         <p>If you are using python provided by <a href="https://docs.conda.io/en/latest/miniconda.html">Anaconda</a>
@@ -57,12 +65,12 @@ <h3>Download archive</h3>
                 <div class="" >
                     <div class="content">
                         <h2>Download the latest version for Mac</h2>
-                        <a id="recommended-download-mac" style="margin-top: 10px" class="btn btn-warning big-button-base" href="https://service.biolab.si/download/orange?platform=mac">
+                        <a id="recommended-download-mac" style="margin-top: 10px" class="btn btn-warning big-button-base download-button" href="https://service.biolab.si/download/orange?platform=mac">
                             Download Orange
                         </a>
 
                         <h3><a id="standalone"></a>Bundle</h3>
-                        <a id="recommended-download" href="https://service.biolab.si/download/orange?platform=mac">Orange.dmg</a><br/>
+                        <a id="recommended-download" class="download-button" href="https://service.biolab.si/download/orange?platform=mac">Orange.dmg</a><br/>
                         <p>A universal bundle with everything packed in and ready to use.</p>
 
                         <h3><a id="anaconda"></a>Anaconda</h3>
@@ -235,6 +243,36 @@ <h3>Installing add-ons</h3>
             els[i].classList.remove('icon-selected');
           }
         }
+
+        var popupShown = false;
+
+        function showEmailCourse() {
+            if (popupShown) {
+                return
+            }
+            $("#bkgOverlay").delay(2800).fadeIn(200);
+            $("#delayedPopup").delay(3000).fadeIn(200);
+            popupShown = true
+        }
+
+        function hideEmailCourse() {
+            $("#bkgOverlay").fadeOut(200);
+            $("#delayedPopup").fadeOut(200);
+        }
+
+        $(document).ready(function () {
+            $(".download-button").click(showEmailCourse);
+
+            //close popup when clicking x or off popup
+            $('#bkgOverlay').click(hideEmailCourse);
+
+            //close popup when clicking the esc keyboard button
+            $(document).keyup(function (event) {
+                if (event.which == '27') {
+                    hideEmailCourse();
+                }
+            });
+        });
         </script>
     </section>
 

diff --git a/static/css/custom.css b/static/css/custom.css
@@ -911,3 +911,38 @@ blockquote cite {
     }
 }
 
+/*   This is a dimmed background overlay   */
+.backgroundOverlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    background: #000000;
+    opacity: .85;
+    filter: alpha(opacity=85);
+    -moz-opacity: .85;
+    z-index: 101;
+    display: none;
+}
+
+/*   This is the Popup Window   */
+.delayedPopupWindow {
+    display: none;
+    position: fixed;
+    width: auto;
+    max-width: 480px;
+    height: 310px;
+    top: 50%;
+    left: 50%;
+    margin-left: -260px;
+    margin-top: -180px;
+    background-color: #efefef;
+    border: 2px solid #333;
+    z-index: 102;
+    padding: 10px 20px;
+}