New: close modal dialogs by clicking outside of modal

src/UI/AddSeries/RootFolders/RootFolderLayoutTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Select Folder</h3>
@@ -28,5 +27,4 @@
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>
     </div>
-    </div>
 </div>

src/UI/Calendar/CalendarFeedViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>NzbDrone Calendar feed</h3>
@@ -26,5 +25,4 @@
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>
     </div>
-    </div>
 </div>

src/UI/Episode/EpisodeDetailsLayoutTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="episode-detail-modal">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -32,6 +31,4 @@
             <button class="btn btn-default" data-dismiss="modal">close</button>
         </div>
     </div>
-    </div>
 </div>
-

src/UI/History/Details/HistoryDetailsLayoutTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="history-detail-modal">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -19,5 +18,4 @@
             <button class="btn" data-dismiss="modal">close</button>
         </div>
     </div>
-    </div>
 </div>

src/UI/Hotkeys/HotkeysViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Keyboard Shortcuts</h3>
@@ -43,5 +42,4 @@
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>
     </div>
-    </div>
 </div>

src/UI/Rename/RenamePreviewLayoutTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="rename-preview-modal">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -25,5 +24,4 @@
             <button class="btn btn-primary x-organize">Organize</button>
         </div>
     </div>
-    </div>
 </div>

src/UI/Series/Delete/DeleteSeriesTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Delete {{title}}</h3>
@@ -44,5 +43,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-danger x-confirm-delete">delete</button>
     </div>
-    </div>
 </div>

src/UI/Series/Edit/EditSeriesViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>{{title}}</h3>
@@ -93,5 +92,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-primary x-save">save</button>
     </div>
-    </div>
 </div>

src/UI/Series/Editor/Organize/OrganizeFilesViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Organize of Selected Series</h3>
@@ -23,5 +22,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-danger x-confirm-organize">organize</button>
     </div>
-    </div>
 </div>

src/UI/Settings/DownloadClient/Add/DownloadClientAddCollectionViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Add Download Client</h3>
@@ -12,5 +11,4 @@
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>
     </div>
-    </div>
 </div>

src/UI/Settings/DownloadClient/Delete/DownloadClientDeleteViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Delete Download Client</h3>
@@ -11,5 +10,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-danger x-confirm-delete">delete</button>
     </div>
-    </div>
 </div>

src/UI/Settings/DownloadClient/Edit/DownloadClientEditViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         {{#if id}}
@@ -62,5 +61,4 @@
             </ul>
         </div>
     </div>
-    </div>
 </div>

src/UI/Settings/Indexers/Add/IndexerAddCollectionViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Add Indexer</h3>
@@ -12,5 +11,4 @@
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>
     </div>
-    </div>
 </div>

src/UI/Settings/Indexers/Delete/IndexerDeleteViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Delete Indexer</h3>
@@ -11,5 +10,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-danger x-confirm-delete">delete</button>
     </div>
-    </div>
 </div>

src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close x-close" aria-hidden="true">&times;</button>
         {{#if id}}
@@ -61,5 +60,4 @@
             </ul>
         </div>
     </div>
-    </div>
 </div>

src/UI/Settings/Metadata/MetadataEditViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Edit</h3>
@@ -41,5 +40,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-primary x-save">save</button>
     </div>
-    </div>
 </div>

src/UI/Settings/Notifications/Add/NotificationAddCollectionViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Add Notification</h3>
@@ -12,5 +11,4 @@
     <div class="modal-footer">
         <button class="btn" data-dismiss="modal">close</button>
     </div>
-    </div>
 </div>

src/UI/Settings/Notifications/Delete/NotificationDeleteViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Delete Notification</h3>
@@ -11,5 +10,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-danger x-confirm-delete">delete</button>
     </div>
-    </div>
 </div>

src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close x-cancel" data-dismiss="modal" aria-hidden="true">&times;</button>
         {{#if id}}
@@ -110,5 +109,4 @@
             </ul>
         </div>
     </div>
-    </div>
 </div>

src/UI/Settings/Profile/DeleteProfileViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Delete: {{name}}</h3>
@@ -11,5 +10,4 @@
         <button class="btn" data-dismiss="modal">cancel</button>
         <button class="btn btn-danger x-confirm-delete">delete</button>
     </div>
-    </div>
 </div>

src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="modal-header">
     <button type="button" class="close x-cancel" aria-hidden="true">&times;</button>
     {{#if id}}
@@ -7,7 +6,7 @@
     {{else}}
     <h3>Add</h3>
     {{/if}}
-    </div>
+</div>
     <div class="modal-body">
         <div class="form-horizontal">
             <div id="x-fields"></div>
@@ -33,5 +32,4 @@
         <button class="btn x-cancel">cancel</button>
         <button class="btn btn-primary x-save">save</button>
     </div>
-    </div>
 </div>

src/UI/Shared/Modal/ModalRegion.js

@@ -5,7 +5,7 @@ define(
         'backbone',
         'marionette',
         'bootstrap'
-    ], function ($,Backbone, Marionette) {
+    ], function ($, Backbone, Marionette) {
         var region = Marionette.Region.extend({
             el: '#modal-region',
 
@@ -27,9 +27,12 @@ define(
                 //https://github.com/twitter/bootstrap/issues/4663
                 this.$el.attr('tabindex', '-1');
                 this.$el.modal({
-                    'show'    : true,
+                    show     : true,
-                    'keyboard': true,
+                    keyboard : true,
-                    'backdrop': 'static'});
+                    backdrop : true
+                });
+
+                this.currentView.$el.addClass('modal-dialog');
             },
 
             closeModal: function () {

src/UI/System/Logs/Table/Details/LogDetailsViewTemplate.html

@@ -1,5 +1,4 @@
-<div class="modal-dialog">
+<div class="modal-content">
-    <div class="modal-content">
     <div class="log-details-modal">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@@ -21,5 +20,4 @@
             <button class="btn" data-dismiss="modal">close</button>
         </div>
     </div>
-    </div>
 </div>