diff --git a/_config/pure-modal.yml b/_config/pure-modal.yml
index 21d6e9c..bd27d44 100644
--- a/_config/pure-modal.yml
+++ b/_config/pure-modal.yml
@@ -3,3 +3,4 @@ Name: pure-modal
 ---
 LeKoala\PureModal\PureModal:
   move_modal_to_body: true
+  overlay_triggers_close: true
diff --git a/src/PureModal.php b/src/PureModal.php
index 61a51b0..872a567 100644
--- a/src/PureModal.php
+++ b/src/PureModal.php
@@ -53,6 +53,16 @@ public static function getMoveModalScript()
         return "document.body.appendChild(this.parentElement.querySelector('.pure-modal'));this.onclick=null;";
     }
 
+    public static function getOverlayTriggersCloseConfig()
+    {
+        return self::config()->overlay_triggers_close;
+    }
+
+    public function getOverlayTriggersClose()
+    {
+        return PureModal::getOverlayTriggersCloseConfig();
+    }
+
     public function getAttributes()
     {
         $attrs = [];
diff --git a/src/PureModalAction.php b/src/PureModalAction.php
index 0f43aa4..59ffae6 100644
--- a/src/PureModalAction.php
+++ b/src/PureModalAction.php
@@ -67,6 +67,11 @@ public function __construct($name, $title)
         parent::__construct($name, $title);
     }
 
+    public function getOverlayTriggersClose()
+    {
+        return PureModal::getOverlayTriggersCloseConfig();
+    }
+
     public function getAttributes()
     {
         $attrs = [];
diff --git a/templates/LeKoala/PureModal/PureModal.ss b/templates/LeKoala/PureModal/PureModal.ss
index 4f1827b..f2d8ff3 100644
--- a/templates/LeKoala/PureModal/PureModal.ss
+++ b/templates/LeKoala/PureModal/PureModal.ss
@@ -5,7 +5,7 @@
 </label>
 <div class="pure-modal from-top">
     <input id="$ModalID" class="pure-checkbox no-change-track" type="checkbox">
-    <div class="pure-modal-overlay">
+    <div class="pure-modal-overlay"<% if getOverlayTriggersClose %> onclick="document.getElementById('$ModalID').checked=false;"<% end_if %>>
         <div class="pure-modal-wrap">
             <label for="$ModalID" class="close btn-close"><span>&#10006;</span></label>
             <% if $Iframe && $IframeTop %>
diff --git a/templates/LeKoala/PureModal/PureModalAction.ss b/templates/LeKoala/PureModal/PureModalAction.ss
index c0779dd..c741bae 100644
--- a/templates/LeKoala/PureModal/PureModalAction.ss
+++ b/templates/LeKoala/PureModal/PureModalAction.ss
@@ -5,8 +5,8 @@
 </label>
 <div class="pure-modal from-top">
     <input id="$ModalID" class="pure-checkbox no-change-track" type="checkbox">
-    <div class="pure-modal-overlay">
-    <div class="pure-modal-wrap pure-modal-action<% if getFillHeight %> fill-height<% end_if %>" style="max-height:90vh;">
+    <div class="pure-modal-overlay"<% if getOverlayTriggersClose %> onclick="document.getElementById('$ModalID').checked=false;"<% end_if %>>
+    <div class="pure-modal-wrap pure-modal-action<% if getFillHeight %> fill-height flex-fill<% end_if %>" style="max-height:90vh;">
             <label for="$ModalID" class="pure-modal-close"></label>
             <div class="toolbar toolbar--north row">
                 <h1>$Title</h1>