diff --git a/repair/templates/common.html b/repair/templates/common.html
index aacd463c0..8db4099fa 100644
--- a/repair/templates/common.html
+++ b/repair/templates/common.html
@@ -4,8 +4,8 @@
 <!-- divs to put the modals in -->
 <div id="alert-modal" class="modal fade" role="dialog" style="z-index: 99999;"></div>
 <div id="info-modal" class="modal fade" role="dialog" style="z-index: 99999;"></div>
-<div id="generic-modal" class="modal fade" role="dialog" style="z-index: 99999;"></div>
-<div id="confirmation-modal" class="modal fade" role="dialog" style="z-index: 99999;"></div>
+<div id="generic-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 99999;"></div>
+<div id="confirmation-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 99999;"></div>
 
 <!-- template for alerts -->
 
diff --git a/repair/templates/conclusions/workshop.html b/repair/templates/conclusions/workshop.html
index f552a764b..a67b5f268 100644
--- a/repair/templates/conclusions/workshop.html
+++ b/repair/templates/conclusions/workshop.html
@@ -63,7 +63,7 @@ <h3 id="keyflow-warning" style="display: none;"><span class="glyphicon glyphicon
       </button>
     </div>
   </div>
-  <div id="add-conclusion-modal" class="modal fade" role="dialog">
+  <div id="add-conclusion-modal" data-backdrop="static" class="modal fade" role="dialog">
   <div id="manage-conclusions-modal"></div>
     <div class="modal-dialog modal-lg">
       <div class="modal-content col-md-12">
diff --git a/repair/templates/dataentry/actors-flows.html b/repair/templates/dataentry/actors-flows.html
index 605a7123d..f0fb082ba 100644
--- a/repair/templates/dataentry/actors-flows.html
+++ b/repair/templates/dataentry/actors-flows.html
@@ -69,7 +69,7 @@ <h3 id="select-actors-tip" class="row"><span class="glyphicon glyphicon-arrow-le
       </div>
     </div>
   </div>
-  <div id="actor-select-modal" class="modal fade" role="dialog">
+  <div id="actor-select-modal" data-backdrop="static" class="modal fade" role="dialog">
     <div class="modal-dialog modal-lg" style="width: 80%;">
       <div class="modal-content col-md-12">
         <div class="modal-header">
@@ -162,7 +162,7 @@ <h4> <span class="fa fa-warehouse" style="margin-right: 5px;"></span> {% trans "
       </button>
     </div>
   </div>
-  <div id="datasource-modal" class="modal fade" role="dialog" style='z-index: 1101;'> <!-- has to be infront of composition modal -->
+  <div id="datasource-modal" data-backdrop="static" class="modal fade" role="dialog" style='z-index: 1101;'> <!-- has to be infront of composition modal -->
     <div class="modal-dialog modal-lg" style="width: 80%;">
       <!-- Modal content-->
       <div class="modal-content col-md-12">
@@ -202,7 +202,7 @@ <h4 class="modal-title">{% trans "Edit Datasource" %}</h4>
       </div>
     </div>
   </div>
-  <div id="flow-nodes-modal" class="modal fade" role="dialog">
+  <div id="flow-nodes-modal" data-backdrop="static" class="modal fade" role="dialog">
     <div class="modal-dialog modal-lg" style="width: 80%;">
       <div class="modal-content col-md-12">
         <div class="modal-header">
@@ -220,7 +220,7 @@ <h4 class="modal-title"></h4>
       </div>
     </div>
   </div>
-  <div id="fractions-modal" class="modal fade" role="dialog" style='z-index: 1100;'> <!-- has to behind datasource modal -->
+  <div id="fractions-modal" data-backdrop="static" class="modal fade" role="dialog" style='z-index: 1100;'> <!-- has to behind datasource modal -->
   </div>
 </script>
 
@@ -486,7 +486,7 @@ <h4 class="row"> {% trans "Locations" %} </h4>
         </button>
       </div>
     </div>
-    <div id="location-modal" class="modal fade" role="dialog">
+    <div id="location-modal" data-backdrop="static" class="modal fade" role="dialog">
       <div class="modal-dialog modal-lg">
         <!-- Modal content-->
         <div class="modal-content col-md-12">
diff --git a/repair/templates/dataentry/actors.html b/repair/templates/dataentry/actors.html
index fa8274fd7..bb21f6fb5 100644
--- a/repair/templates/dataentry/actors.html
+++ b/repair/templates/dataentry/actors.html
@@ -176,7 +176,7 @@ <h4 class="row"> {% trans "Locations" %} </h4>
         </button>
       </div>
     </div>
-    <div id="location-modal" class="modal fade" role="dialog">
+    <div id="location-modal" data-backdrop="static" class="modal fade" role="dialog">
       <div class="modal-dialog modal-lg">
         <!-- Modal content-->
         <div class="modal-content col-md-12">
diff --git a/repair/templates/dataentry/index.html b/repair/templates/dataentry/index.html
index 7c6b6013c..80a9119c9 100644
--- a/repair/templates/dataentry/index.html
+++ b/repair/templates/dataentry/index.html
@@ -56,7 +56,7 @@ <h3 id="keyflow-warning"><span class="glyphicon glyphicon-arrow-left"></span>  {
       </div>
     </div>
     <!-- modal for creation of keyflows -->
-    <div id="create-keyflow-modal" class="modal fade" role="dialog">
+    <div id="create-keyflow-modal" data-backdrop="static" class="modal fade" role="dialog">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
diff --git a/repair/templates/strategy/solutions.html b/repair/templates/strategy/solutions.html
index f32b973af..95e49f18b 100644
--- a/repair/templates/strategy/solutions.html
+++ b/repair/templates/strategy/solutions.html
@@ -70,7 +70,7 @@ <h4>{% trans "Activities involved" %}</h4>
     </div>
   </div>
 </div>
-<div id="add-solution-modal" class="modal fade" role="dialog" style="z-index: 10000;">
+<div id="add-solution-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
@@ -94,7 +94,7 @@ <h4 class="modal-title"> Add Solution </h4>
     </div>
   </div>
 </div>
-<div id="categories-modal" class="modal fade" role="dialog" style="z-index: 10000;"></div>
+<div id="categories-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;"></div>
 </script>
 
 <!-- modal for editing categories -->
@@ -177,7 +177,7 @@ <h4>{% trans "Notes (visible in setup mode only)" %} </h4>
     <textarea class="sunken bordered" rows="20" name="notes" style="width: 100%; resize: vertical;"></textarea>
   </div>
 </div>
-<div id="solution-part-modal" class="modal fade" role="dialog" style="z-index: 10000;">
+<div id="solution-part-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;">
   <div class="modal-dialog modal-lg" style="width: 80%; -webkit-transform: none; transform: none;">
     <div class="modal-content col-md-12">
       <div class="modal-header">
@@ -192,7 +192,7 @@ <h4 class="modal-title">{% trans "Edit Solution Part" %}</h4>
     </div>
   </div>
 </div>
-<div id="question-modal" class="modal fade" role="dialog" style="z-index: 10000;">
+<div id="question-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;">
   <div class="modal-dialog modal-lg">
     <div class="modal-content col-md-12">
       <div class="modal-header">
@@ -207,7 +207,7 @@ <h4 class="modal-title">{% trans "Edit Question" %}</h4>
     </div>
   </div>
 </div>
-<div id="area-modal" class="modal fade" role="dialog" style="z-index: 10000;">
+<div id="area-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;">
   <div class="modal-dialog modal-lg" style="width: 80%; -webkit-transform: none; transform: none;">
     <div class="modal-content col-md-12">
       <div class="modal-header">
@@ -223,7 +223,7 @@ <h4 class="modal-title">{% trans "Edit Possible Implementation Area" %}</h4>
     </div>
   </div>
 </div>
-<div id="schemes-modal" class="modal fade" role="dialog" style="z-index: 10000;">
+<div id="schemes-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;">
   <div class="modal-dialog modal-lg" style="width: 80%; -webkit-transform: none; transform: none;">
     <div class="modal-content">
       <div class="modal-header">
@@ -312,7 +312,7 @@ <h4 id="selected-scheme-title"></h4>
 <h3> {% trans "Solutions for the key flow" %} <i><%= keyflowName %></i> </h3>
 <div id="categories" class="row overflow">
 </div>
-<div id="solution-modal" class="modal fade" role="dialog" style="z-index: 10000;"></div>
+<div id="solution-modal" data-backdrop="static" class="modal fade" role="dialog" style="z-index: 10000;"></div>
 </script>
 
 <!-- possible implementation area -->
diff --git a/repair/templates/strategy/strategy.html b/repair/templates/strategy/strategy.html
index aa9c9c9d8..b8c392cee 100644
--- a/repair/templates/strategy/strategy.html
+++ b/repair/templates/strategy/strategy.html
@@ -15,7 +15,7 @@ <h3> {% trans "Define your strategy for the key flow" %} <i><%= keyflowName %></
 <div id="solution-strategy-modal" class="modal fade" role="dialog" style="z-index: 10000;"></div>
 </div>
 
-<div id="add-solution-modal" class="modal fade" role="dialog">
+<div id="add-solution-modal" data-backdrop="static" class="modal fade" role="dialog">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
diff --git a/repair/templates/studyarea/charts.html b/repair/templates/studyarea/charts.html
index fd01c6cb4..3dcbcb3a2 100644
--- a/repair/templates/studyarea/charts.html
+++ b/repair/templates/studyarea/charts.html
@@ -49,7 +49,7 @@ <h4 style="float: left;"> {% trans "Charts" %} </h4>
     <div class="col-md-6 bordered" id="chart-image-wrapper"></div>
   </div>
 </div>
-<div class="modal fade" role="dialog" id="add-chart-modal" style="z-index: 10000;">
+<div class="modal fade" data-backdrop="static" role="dialog" id="add-chart-modal" style="z-index: 10000;">
   <div class="modal-dialog" style='-webkit-transform: none; transform: none;'>
     <div class="modal-content">
       <div class="modal-header">
diff --git a/repair/templates/studyarea/maps.html b/repair/templates/studyarea/maps.html
index adb9371b2..e6a92c282 100644
--- a/repair/templates/studyarea/maps.html
+++ b/repair/templates/studyarea/maps.html
@@ -99,7 +99,7 @@ <h4> {% trans "Legend" %} </h4>
     </div>
   </div>
 </div>
-<div class="modal fade" role="dialog" id="add-layer-modal">
+<div class="modal fade" data-backdrop="static" role="dialog" id="add-layer-modal">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">