Improved dialog boxes

Centered vertically, assimilated design, changed from jQuery which caused bugs

canvas/css/canvas.css

@@ -465,7 +465,7 @@ div#shadow {
 }
 
 /* ----------------------------------------------
-    Move and tag window
+    Move window and tag windows
 ----------------------------------------------- */
 
 div.window {
@@ -763,46 +763,46 @@ footer .license-icons ul img {
 }
 
 /* ----------------------------------------------
-    Dialog popups
+    Dialog windows
 ----------------------------------------------- */
 
 div.dialog {
     display: none;
-}
-.ui-widget {
+    width: 26%;
+    position: fixed;
+    top: 37%;
+    left: 37%;
     font-family: 'Open Sans', sans-serif;
-}
-.ui-widget-content {
-    border: none;
-    padding: 0.75em 1.5em 0.75em 0.75em;
-    background-color: rgba(236, 239, 241, 0.95) !important;
-}
-.ui-dialog {
+    z-index: 2;
     background-color: rgba(236, 239, 241, 0.95);
-    left: 0;
-    outline: 0 none;
-    padding: 0 !important;
-    position: absolute;
-    top: 0;
+    border-radius: 5px;
+    min-height: 150px;
+}
+div.dialog h2 {
+    font-size: 1.4em;
+    margin: 0;
+    color: #444;
 }
-.ui-dialog p {
+div.dialog p {
     font-size: 0.95em;
     color: rgb(51, 51, 51);
 }
-.ui-widget-header {
-    border: 0;
-    border-radius: 0;
-}
-.ui-dialog button {
-    border: none;
-    border-radius: 0;
-    background: none;
+div.dialog button {
+    position: relative;
+    top: -8px;
+    font-size: 2.5em;
     outline: 0;
     color: #444;
+    float: right;
 }
-.ui-button-icon-only span {
-    margin-top: -10px !important;
-    font-size: 2.5em;
+div.dialog-header {
+    background-color: rgb(200, 200, 200);
+    padding: 0.65em 0.75em 0.65em 0.75em;
+    border-radius: 5px 5px 0 0;
+    width: 100%;
+}
+div.dialog-content {
+    padding: 0.75em 1.5em 0.75em 0.75em;
 }
 
 /* ----------------------------------------------
@@ -875,6 +875,11 @@ div.dialog {
     .added_item div {
         height: 8em;
     }
+    /* Dialog */
+    div.dialog {
+        width: 60%;
+        left: 20%;
+    }
     /* Form Header */
     .form-header {
         width: 100%;
@@ -1043,6 +1048,11 @@ div.dialog {
     .added_item div {
         height: 8em;
     }
+    /* Dialog */
+    div.dialog {
+        width: 46%;
+        left: 27%;
+    }
     /* Form Header */
     .form-header {
         width: 100%;
@@ -1130,6 +1140,11 @@ div.dialog {
     .field_07, .field_08 {
         min-height: 500px;
     }
+    /* Dialog */
+    div.dialog {
+        width: 30%;
+        left: 37%;
+    }
     /* Form Header */
     .form-header {
         width: 100%;
@@ -1177,7 +1192,7 @@ div.dialog {
     }
 }
 
-/* ---------------- COL 4 Large ---------------- */
+/* ---------------- 4 COL Large ---------------- */
 
 @media (min-width: 992px) and (max-width: 1153px) {
     .masonry-layout7-5 {
@@ -1204,6 +1219,11 @@ div.dialog {
     .field_07, .field_08 {
         min-height: 480px;
     }
+    /* Dialog */
+    div.dialog {
+        width: 30%;
+        left: 37%;
+    }
     /* Form Header */
     .form-header {
         width: 100%;
@@ -1234,7 +1254,7 @@ div.dialog {
     .new_item {}
 }
 
-/* ---------------- COL 5 ---------------- */
+/* ---------------- 5 COL ---------------- */
 
 @media (min-width: 1154px) and (max-width: 1650px) {
     /* DESKTOP version: HOLDING THE CANVAS DEFAULT LAYOUT FORM */

canvas/index.php

@@ -861,11 +861,27 @@
 
         <!-- Start of dialogs -->
         <div id="shadow">&nbsp;</div>
-        <div class="dialog" id="dialog-log-in" title="Please log in">
-            <p>Please log in to use this function.</p>
+        <div class="dialog" id="dialog-log-in">
+            <div class="dialog-header">
+                <button type="button" class="close" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h2>
+                    Please log in
+                </h2>
+            </div>
+            <div class="dialog-content"><p>Please log in to use this function.</p></div>
         </div>
-        <div class="dialog" id="dialog-select-term" title="Please select term">
-            <p>Please select a term to be tagged.</p>
+        <div class="dialog" id="dialog-select-term">
+            <div class="dialog-header">
+                <button type="button" class="close" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                </button>
+                <h2>
+                    Please select term
+                </h2>
+            </div>
+            <div class="dialog-content"><p>Please select a term to be tagged.</p></div>
         </div>
         <!--
         <div class="dialog" id="dialog-tag-already-exists" title="Tag already exists">

canvas/js/canvas.js

@@ -5,10 +5,7 @@ $(document).ready(function() {
     ================================================= */
     // Declare the currently loaded tags belonging to the user
     var tags;
-    
-    // Fix to make the "X" in the Close button in dialogs show up
-    $.fn.bootstrapBtn = $.fn.button.noConflict();    
-    
+        
     // This piece of code is for making the column-count and column-gap CSS to work in Firefox
     document.getElementById("7-5-col-layout").style.MozColumnCount = "5";
     document.getElementById("4-col-layout").style.MozColumnCount = "4";
@@ -20,7 +17,7 @@ $(document).ready(function() {
             return false;
         }
     });
-    
+        
     /* ================================================
     Rearrange fields numerically if 1 column is displayed
     ================================================= */
@@ -163,7 +160,7 @@ $(document).ready(function() {
         }
     });
     
-    // When the user clicks on "Jump to", show menu
+    // If the user clicks on "Jump to", show menu
     $("div.jump-to-click-area").on("click", function() {
         // Toggle the menu
         $("div.jump-to div div").slideToggle(300);
@@ -177,7 +174,7 @@ $(document).ready(function() {
         return false;
     });
     
-    // When the user clicks on a menu item
+    // If the user clicks on a menu item
     $("div.jump-to ul a").on("click", function() {
         // Declarations
         var chosenLiIndex = $(this).parent().index();
@@ -633,13 +630,13 @@ $(document).ready(function() {
         }
     }
     
-    // When the user presses a key in the description textarea
+    // If the user presses a key in the description textarea
     $("div#tag-window textarea#tag-description").on("keyup", function() {
         // Update remaining characters
         updateRemainingCharacters();
     });
     
-    // When the user clicks on the "Save tag" button
+    // If the user clicks on the "Save tag" button
     $("div#tag-window #save-tag").on("click", function() {
         // Declarations
         var description = $("div#tag-window textarea#tag-description").val();
@@ -676,13 +673,13 @@ $(document).ready(function() {
         tagIsNew = false;
     });
     
-    // When the user clicks on the "Close" button
+    // If the user clicks on the "Close" button
     $("div#tag-window button.close").on("click", function() {
         // Close the tag window
         closeTagWindow();
     });
     
-    // When the user clicks on the "Delete tag" button
+    // If the user clicks on the "Delete tag" button
     $("div#tag-window #delete-tag").on("click", function() {    
         // Declarations
         var tagToAJAX = tag;
@@ -713,7 +710,7 @@ $(document).ready(function() {
         closeTagWindow();
     });
     
-    // When the user focuses in the textarea
+    // If the user focuses in the textarea
     $("div#tag-window textarea#tag-description").on("focusin", function() {
         // Declarations
         var description = $("div#tag-window textarea#tag-description").val();
@@ -726,7 +723,7 @@ $(document).ready(function() {
         }
     });
     
-    // When the user focuses out the textarea
+    // If the user focuses out the textarea
     $("div#tag-window textarea#tag-description").on("focusout", function() {
         // Declarations
         var description = $("div#tag-window textarea#tag-description").val();
@@ -740,14 +737,14 @@ $(document).ready(function() {
     });
     
     /* ================================================
-    When the user types a new character in the added idea field, add tag if a term could be found
+    If the user types a new character in the added idea field, add tag if a term could be found
     ================================================= */
     
     // 8an33j24
     
     function applyTagOnTypeMatch() {
         $("li.added_item div").on("focusin", function() {
-            // When the user presses a key in the description textarea
+            // If the user presses a key in the description textarea
             $("li.added_item div").on("keyup", function() {
                 if(event.which !== 9  &&    // Tab
                    event.which !== 16 &&    // Shift
@@ -870,13 +867,21 @@ $(document).ready(function() {
             
             // if(length >= maxLength) {
                 // $(this).html(newText);
-
+                
                 // Move the text cursor to the very end
             }
         });
          */
     }
     
+    /* ================================================
+    If the user closes a dialog
+    ================================================= */
+    $("div.dialog button").on("click", function() {
+        $("div#shadow").css("display", "none");
+        $("div.dialog").css("display", "none");
+    });
+    
     /* ================================================
     The user clicks on the "Tag selected term" link
     ================================================= */
@@ -897,7 +902,7 @@ $(document).ready(function() {
         }
     }
     
-    // When the user clicks on the "Tag selected term" link
+    // If the user clicks on the "Tag selected term" link
     $("p.tag-selected-term a").on("click", function() {
         // If the tag isn't empty
         if(tag != "") {
@@ -907,22 +912,14 @@ $(document).ready(function() {
         else {
             // Show a dialog
             $("div#shadow").css("display", "block");
-            $("#dialog-select-term").dialog({draggable: false, resizable: false});
-            
-            // Style the close button inside the dialog
-            $(".ui-button-icon-only").html("<button type='button' class='close' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");
+            $("div#dialog-select-term").css("display", "block");
         }
         
         // Prevent the current view to jump to the top of the screen
         return false;
     });
-    
-    // Hide the shadow when closing a dialog
-    $(".dialog").on("dialogclose", function() {
-        $("div#shadow").css("display", "none");
-    });
-    
-    // When the user moves the focus from the added idea, reset variables
+        
+    // If the user moves the focus from the added idea, reset variables
     // $("li.added_item textarea").on("focusout", function() {
     $("li.added_item div").on("focusout", function() {
         selection = "";
@@ -930,9 +927,9 @@ $(document).ready(function() {
     });
     
     /* ================================================
-    When the user clicks on a tag, show the tag window
+    If the user clicks on a tag, show the tag window
     ================================================= */
-    // When the user clicks on a tag
+    // If the user clicks on a tag
     function showTagWindowOnTagClick() {
         $("a.tag").on("click", function() {                                // Event not triggered...
             // Declarations
@@ -946,10 +943,7 @@ $(document).ready(function() {
             else {
                 // Show a dialog
                 $("div#shadow").css("display", "block");
-                $("#dialog-log-in").dialog({draggable: false, resizable: false});
-                
-                // Style the close button inside the dialog
-                $(".ui-button-icon-only").html("<button type='button' class='close' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");
+                $("div#dialog-log-in").css("display", "block");
             }
         });
     }