fixed Issue #48: Closing modals with esc-key doesn't work

css/agency.css

@@ -653,6 +653,11 @@ ul.social-buttons li a:active {
 .btn:active:focus {
   outline: none;
 }
+.portfolio-modal .modal-dialog {
+  margin: 0;
+  height: 100%;
+  width: auto;
+}
 .portfolio-modal .modal-content {
   border-radius: 0;
   background-clip: border-box;

index.html

@@ -472,6 +472,7 @@
 
     <!-- Portfolio Modal 1 -->
     <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="close-modal" data-dismiss="modal">
                     <div class="lr">
@@ -502,9 +503,11 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <!-- Portfolio Modal 2 -->
     <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="close-modal" data-dismiss="modal">
                     <div class="lr">
@@ -528,9 +531,11 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <!-- Portfolio Modal 3 -->
     <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="close-modal" data-dismiss="modal">
                     <div class="lr">
@@ -555,9 +560,11 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <!-- Portfolio Modal 4 -->
     <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="close-modal" data-dismiss="modal">
                     <div class="lr">
@@ -582,9 +589,11 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <!-- Portfolio Modal 5 -->
     <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="close-modal" data-dismiss="modal">
                     <div class="lr">
@@ -609,9 +618,11 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <!-- Portfolio Modal 6 -->
     <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="close-modal" data-dismiss="modal">
                     <div class="lr">
@@ -636,6 +647,7 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <!-- jQuery -->
     <script src="vendor/jquery/jquery.min.js"></script>

less/agency.less

@@ -637,6 +637,11 @@ ul.social-buttons {
 }
 
 .portfolio-modal {
+    .modal-dialog{
+        margin: 0;
+        height: 100%;
+        width: auto;
+    }
     .modal-content {
         border-radius: 0;
         background-clip: border-box;

scss/agency.scss

@@ -717,6 +717,11 @@ ul.social-buttons {
 }
 
 .portfolio-modal {
+  .modal-dialog{
+    margin: 0;
+    height: 100%;
+    width: auto;
+  }
   .modal-content {
     border-radius: 0;
     background-clip: border-box;