adding modal

adding a foundation modal to store the email form

diff --git a/css/front.css b/css/front.css
index cf9ae57..3634265 100644 (file)
--- a/css/front.css
+++ b/css/front.css
@@ -25,4 +25,20 @@
     /* box-shadow: 1px 1px 1px 1px grey; */
     text-align: center;
     width: 100%;
-}
\ No newline at end of file
+}
+
+/* Email Modal Styles */
+.required-field{
+    color: red;
+}
+#emailModal{
+    max-width: 800px;
+}
+#emailModal.reveal-modal .close-reveal-modal {
+    right: 10px;
+    top: 0px;
+}
+.modal-form-wrapper{
+    max-width: 700px;
+    display: none;
+}

diff --git a/views/front/staff/list.html b/views/front/staff/list.html
index a4a7ccb..d960445 100644 (file)
--- a/views/front/staff/list.html
+++ b/views/front/staff/list.html
@@ -38,12 +38,23 @@
 
 </div>
 <div id="emailModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
-    <div class="row">
-        <input class="modal-email-field" type="text" id="sender-name">
-        <input class="modal-email-field" type="text" id="sender-email">
-        <input class="modal-email-field" type="text" id="sender-phone">
-        <input class="modal-email-field" type="text" id="email-subject">
-        <textarea rows="5" class="modal-email-field" type="text" id="email-message"></textarea>
+    
+    <div class="row modal-form-wrapper">
+        <div id="modal-handle"><h2> Send A Message</h2></div>
+        <div id="modal-instructions"></div>
+        <form action="">
+            <div class="modal-email-label">Your Name &nbsp;<span class="required-field">(required)</span></div>
+            <input class="modal-email-field" type="text" id="sender-name" required>
+            <div class="modal-email-label">Your Email Address&nbsp;<span class="required-field">(required)</span></div>
+            <input class="modal-email-field" type="text" id="sender-email" required>
+            <div class="modal-email-label">Your Phone Number </div>
+            <input class="modal-email-field" type="text" id="sender-phone">
+            <div class="modal-email-label">Email Subject &nbsp;<span class="required-field">(required)</span></div>
+            <input class="modal-email-field" type="text" id="email-subject" required>
+            <div class="modal-email-label">Email Message</div>
+            <textarea rows="5" class="modal-email-field" type="text" id="email-message"></textarea>
+            <input class="button" type="submit" value="Submit">
+        </form>
     </div>
     <a class="close-reveal-modal" aria-label="Close">&#215;</a>
 </div>
@@ -52,27 +63,29 @@
        $('.glm-staff-email > a').on("click", function(e){  
             let id = $(this).data('id');
             let data = {
-
                 action: 'glm_members_admin_ajax',
                 glm_action: 'staffEmail',
                 staff_id: id
             };
-            // $.ajax({
-            //     type: 'POST',
-            //     url: '{$ajaxUrl}',
-            //     data: data,
-            //     beforeSend: function(){
+
+            $.ajax({
+                type: 'POST',
+                url: '{$ajaxUrl}',
+                data: data,
+                beforeSend: function(){
                     
-            //     },
-            //     complete: function(){
+                },
+                complete: function(){
                     
-            //     },
-            //     cache: false,
-            //     success: function (response){
-            //         console.log(response)
-            //         $("#email-form-root"),
-            //     }
-            // })
+                },
+                cache: false,
+                success: function (response){
+                    console.log(response)
+                    $('<span class="message-instructions">To send a message directly to STAFF NAME please fill out the form below and click "Send" when complete.</span>').appendTo( $("#modal-instructions"));
+
+                    $(".modal-form-wrapper").fadeIn("fast");
+                }
+            })
         })
     });