adding modal login
authorAnthony Talarico <talarico@gaslightmedia.com>
Thu, 19 Apr 2018 20:05:13 +0000 (16:05 -0400)
committerAnthony Talarico <talarico@gaslightmedia.com>
Thu, 19 Apr 2018 20:05:13 +0000 (16:05 -0400)
adding modal login box

header.php
js/custom.js
style.css

index 9f8cd06..35af285 100644 (file)
 </head>
 
 <body <?php body_class(); ?>>
+<div id="modal-login">
+    <?php echo do_shortcode('[glm-login-form]'); ?>
+    <a class="registration-link" href="<?php echo get_permalink(21); ?>"> Sign Up </a>
+</div>
+
 <div id="page" class="hfeed site">
        <header id="masthead" class="<?php echo of_get_option('header_layout'); ?>">
                <div class="mid-content clearfix">
index 7ffebb0..7627071 100644 (file)
@@ -151,4 +151,10 @@ jQuery(document).ready(function($){
            
     }
     $('.cmvl-title').insertAfter('.cmvl-navbar');
+    if( $(window).width() > 1000){
+        $('.menu-item').on("click", function(){
+            $("#modal-login").toggleClass("show-login");
+        })
+        
+    }
 });
\ No newline at end of file
index c6a1345..4e3ba7c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -2600,4 +2600,22 @@ body #content .parallax-section:first-child,body #content .parallax-section:last
 #glm-member-login-form + p{
     max-width: 250px;
     margin: 0 auto;
+}
+#modal-login{
+    padding: 15px;
+    border-radius: 6px;
+    position: absolute;
+    background-color: white;
+    width: 250px;
+    margin: 0 auto;
+    z-index: 999999;
+    right: 25px;
+    top: 0;
+    transform: translateY(-105%);
+    box-shadow: 2px 4px 10px 3px rgba(46,61,73,.5);
+    transition: top 800ms ease-in-out;
+}
+#modal-login.show-login{
+    top: 50%;
+    position: fixed;
 }
\ No newline at end of file