diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
index 05a5777..4e74980 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/HomeController.js
@@ -385,6 +385,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
             $(".btn-annotation-arrow").addClass("activebtncolor");
         }
         $rootScope.DrawText = function () {
+         
             $rootScope.setListManagerZindex = true;
             $("#canvasPaint").css("display", "block");
             $("#canvas").css("display", "block");
@@ -972,6 +973,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                     $rootScope.TextID = TextAreaRectNameConcat;
 
                     $rootScope.rectDimension.push({ width: layer.width, height: layer.height, x: layer.x, y: layer.y });
+                    $("#annotationTextModal").css("padding-right", "0px");
+                    document.getElementById('modelbackground').style.display = "block";
                     $("#annotationTextModal").modal("toggle");
 
                     $("#text_area").val('');
@@ -1023,7 +1026,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
                 }
             });
 
-
+            $("#annotationTextModal").css("padding-right", "0px");
             $("#annotationTextModal").modal("toggle");
             $('.btnCursor').trigger('click');
             $("#font-color .minicolors .minicolors-swatch .minicolors-swatch-color").css({ "background-color": "#000000" });
@@ -1159,6 +1162,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
                     break;
                 case "TextArea":
+                    document.getElementById('modelbackground').style.display = "block";
                     $rootScope.IsTextAlreadySave = false;
                     $("#text_area").val('');
                     // Draw text
@@ -1184,7 +1188,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
         ///-----
 
         $rootScope.saveText = function () {
-
+            document.getElementById('modelbackground').style.display = "none";
             // this part will work first time when save button will be clicked
             if ($rootScope.IsTextAlreadySave == false) {
                 // getting textarea style properties
@@ -1424,6 +1428,8 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
                               //  _rectLayerOnSaveSplitInt = '';
                               textArrVal = '';
+                              $("#annotationTextModal").css("padding-right", "0px");
+                              document.getElementById('modelbackground').style.display = "block";
                               $("#annotationTextModal").modal("toggle");
 
 
@@ -1626,7 +1632,7 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
                               }
 
-
+                              document.getElementById('modelbackground').style.display = "block";
                               $("#annotationTextModal").modal("toggle");
                           },
                           mouseout: function (layer) {
@@ -1711,12 +1717,13 @@ AIA.controller("HomeController", ["$rootScope", "Modules", "$log", "$location", 
 
         $rootScope.closeModal = function () {
 
+            document.getElementById('modelbackground').style.display = "none";
+          
+            //if ($rootScope.isTextAreaClosedButtonActive == true) {
+            //    $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
+            //    $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
 
-            if ($rootScope.isTextAreaClosedButtonActive == true) {
-                $("#canvas").removeLayer('TextArea_' + $rootScope.TextNumber).drawLayers();
-                $("#canvas").removeLayer("TextRect_" + $rootScope.resetTextRect).drawLayers();
-
-            }
+            //}
 
         }
         //-- End ----------------------------
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 9064c74..847ce1f 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -510,7 +510,7 @@
 
                                 <div id="edit-block" style="display: none; font-size: 13px;">Edit Shape Style</div>
                                 <div class="outlinediv">
-                                    <div id="shapeStyleDiv" class="fullcolordiv" ng-click="disableAnnotationtoolOnListManager||enableAnnotationToolBar()">
+                                    <div id="shapeStyleDiv" class="fullcolordiv"  ng-click="disableAnnotationtoolOnListManager||enableAnnotationToolBar()">
 
                                     </div>
 
@@ -561,8 +561,8 @@
     </div>
 
     <!--Modal For Annotation Text Box-->
-    <div class="modal fade" id="annotationTextModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 1200000!important;">
-        <div class="modal-dialog" role="document">
+    <div  id="annotationTextModal" style="display:none;z-index: 1000000000;width:500px;height:241px;padding-right:0!important;position:fixed;left:0;right:0;top:0px;bottom:0;margin:auto;">
+       
             <div class="modal-content">
                 <div class="modal-header" style="background-color: #808D43;padding:10px;border-bottom:0;">
                     <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
@@ -572,9 +572,7 @@
                     <div class="col-xs-12" style="padding:20px 0;">
                         <div class="form-inline">
                             <!--Annotation: Text in different font style is same.-->
-                            <select class="form-control" id="selected-font-family">
-                              
-                            </select>
+                            <select class="form-control" id="selected-font-family"></select>
                             <select class="form-control" id="selected-font-size">
                                 <option>14</option>
                                 <option>16</option>
@@ -629,11 +627,11 @@
                 </div>
                 <div class="modal-footer">
                     <!--<button type="button" class="btn btn-default" ng-click="closeModal()" data-dismiss="modal">Close</button>-->
-                    <button type="button" class="btn btn-default" id="closeEditText" data-dismiss="modal">Close</button>
-                     <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
+                    <button type="button" class="btn btn-default" ng-click="closeModal()" id="closeEditText" data-dismiss="modal">Close</button>
+                    <button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal" ng-click="saveText()">Save</button>
                 </div>
             </div>
-        </div>
+       
     </div>
 
 
@@ -1255,6 +1253,7 @@
             $(".modal").draggable();
             $(".annotationTollbar").draggable();
             $(".modeleditstyle").draggable();
+            $("#annotationTextModal").draggable();
         });
     </script>