Popups in Target&NonTarget Tools are opened at center on mobile devices

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.html

@@ -1,17 +1,19 @@
 <template name="lesionLocationDialog">
     <div id="lesionLocationDialog">
-        <div class="dialogHeader">
-            <h4>Select Lesion Location</h4>
-        </div>
-        <div class="dialogContent">
-            <div class="lesionLocation">
-                <label>Lesion Location</label>
-                <select id="selectLesionLocation">
-                    <option value="-1"></option>
-                    {{ #each lesionLocations}} 
+        <div class="lesionContentWrapper">
+            <div class="dialogHeader">
+                <h4>Select Lesion Location</h4>
+            </div>
+            <div class="dialogContent">
+                <div class="lesionLocation">
+                    <label>Lesion Location</label>
+                    <select id="selectLesionLocation">
+                        <option value="-1"></option>
+                        {{ #each lesionLocations}}
                         <option value='{{_id}}'>{{location}}</option>
-                    {{ /each}}
-                </select>
+                        {{ /each}}
+                    </select>
+                </div>
             </div>
         </div>
     </div>

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.js

@@ -62,11 +62,30 @@ function getLesionLocationCallback(measurementData, eventData, doneCallback) {
     }
 
     // Show the lesion location dialog above
-    lesionDialog.css({
+
+    var dialogProperty =  {
         top: eventData.currentPoints.page.y - lesionDialog.outerHeight() - 40,
         left: eventData.currentPoints.page.x - lesionDialog.outerWidth() / 2,
         display: 'block'
-    });
+    };
+
+    // Device is touch device or not
+    // If device is touch device, set position center of screen vertically and horizontally
+    if (isTouchDevice()) {
+        // add dialogMobile class to provide a black,transparent background
+        $(lesionDialog).addClass("dialogMobile");
+        dialogProperty.top = 0;
+        dialogProperty.left = 0;
+        dialogProperty.right = 0;
+        dialogProperty.bottom = 0;
+        $(".lesionContentWrapper").css({
+            left: ($(window).width() - $(".lesionContentWrapper").width()) / 2,
+            top: ($(window).height() - $(".lesionContentWrapper").height()) / 2
+
+        });
+    }
+
+    lesionDialog.css(dialogProperty);
 
     // Attach a callback for the select box
     selector.off('change');

Packages/lesiontracker/components/lesionLocationDialog/lesionLocationDialog.styl

@@ -2,9 +2,22 @@
     display: none
     position: absolute
     z-index: 100
-    background: white
-    padding: 10px
-    border-radius: 10px
+
+/* dialogMobile is added to #lesionLocationDialog when touchDevices is detected */
+.dialogMobile
+    margin: 0 auto;
+    float: none;
+    background-color: rgba(0,0,0,0.5);
+    text-align: center;
+
+.lesionContentWrapper
+    position: absolute;
+    width: 250px;
+    height: 150px;
+    border-radius: 10px;
+    padding: 10px 20px 10px 20px;
+    background-color: rgba(255,255,255,1);
+    text-align: left
 
 #closeLesionPopup
     outline: 0
@@ -16,4 +29,4 @@
     
 .dialogContent
     margin-bottom: 20px
-    
+