Added related modal close button #45

admin_interface/admin.py

@@ -94,6 +94,7 @@ class ThemeAdmin(admin.ModelAdmin):
                 'related_modal_background_color',
                 'related_modal_background_opacity',
                 'related_modal_rounded_corners',
+                'related_modal_close_button_visible',
             )
         }),
         (_('List Filter'), {

admin_interface/migrations/0013_add_related_modal_close_button.py

@@ -0,0 +1,20 @@
+# -*- coding: utf-8 -*-
+
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('admin_interface', '0012_update_verbose_names'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='theme',
+            name='related_modal_close_button_visible',
+            field=models.BooleanField(default=True, verbose_name='close button visible'),
+        ),
+    ]

admin_interface/models.py

@@ -1,4 +1,5 @@
 # -*- coding: utf-8 -*-
+
 from __future__ import unicode_literals
 
 from django.db import models
@@ -247,6 +248,9 @@ class Theme(models.Model):
     related_modal_rounded_corners = models.BooleanField(
         default=True,
         verbose_name=_('rounded corners'))
+    related_modal_close_button_visible = models.BooleanField(
+        default=True,
+        verbose_name=_('close button visible'))
 
     list_filter_dropdown = models.BooleanField(
         default=False,

admin_interface/static/admin_interface/related-modal/related-modal.js

@@ -78,7 +78,10 @@ if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined')
                 }
 
                 // build the iframe html
-                var iframeHTML = '<iframe id="related-modal-iframe" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
+                var iframeHTML = '<div class="related-modal-iframe-container">' +
+                                    '<iframe id="related-modal-iframe" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>' +
+                                '</div>';
+
                 // create the iframe jquery element
                 var iframeEl = $(iframeHTML);
 
@@ -105,6 +108,8 @@ if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined')
                 // open the popup using magnific popup
                 $.magnificPopup.open({
                     mainClass: iframeInternalModalClass,
+                    showCloseBtn: true,
+                    closeBtnInside: true,
                     items: {
                         src: iframeEl,
                         type: 'inline'

admin_interface/templates/admin_interface/css/related-modal.css

@@ -3,38 +3,56 @@ related modal + magnific popup customization
 https://github.com/dimsemenov/Magnific-Popup
 */
 .admin-interface .related-modal.mfp-bg {
-    background-color:{{ theme.related_modal_background_color }};
+    background-color: {{ theme.related_modal_background_color }};
     opacity: {{ theme.related_modal_background_opacity }};
 }
 
 .admin-interface .related-modal .mfp-content {
     height: 100%;
-    overflow: hidden;
-    {% if theme.related_modal_rounded_corners %}
-    border-radius: 4px;
-    {% endif %}
     -webkit-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
     box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.2);
 }
 
 .admin-interface .related-modal .mfp-container {
-    padding: 90px 90px 90px 90px;
+    padding: 80px 80px 80px 80px;
 }
 
 .admin-interface .related-modal__nested .mfp-container {
-    padding: 30px 60px 30px 60px;
+    padding: 40px 80px 40px 80px;
 }
 
 @media (max-width:640px){
     .admin-interface .related-modal .mfp-container {
-        padding: 60px 15px 60px 15px;
+        padding: 80px 20px 80px 20px;
     }
     .admin-interface .related-modal__nested .mfp-container {
-        padding: 30px 30px 30px 30px;
+        padding: 40px 40px 40px 40px;
     }
 }
 
+@media (max-height:640px){
+    .admin-interface .related-modal .mfp-container {
+        padding-top: 20px;
+        padding-bottom: 20px;
+    }
+    .admin-interface .related-modal__nested .mfp-container {
+        padding: 40px 40px 40px 40px;
+    }
+}
+
+.admin-interface .related-modal .related-modal-iframe-container {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 100;
+    overflow: hidden;
+    {% if theme.related_modal_rounded_corners %}
+    border-radius: 4px;
+    {% endif %}
+}
+
 .admin-interface .related-modal #related-modal-iframe {
     width: 100%;
     height: 100%;
@@ -47,4 +65,20 @@ https://github.com/dimsemenov/Magnific-Popup
     margin: 0 auto;
     padding: 0;
     display: block;
-}
+}
+
+.admin-interface .related-modal .mfp-close {
+    width: 40px;
+    height: 40px;
+    opacity: 1.0;
+    color: rgba(0, 0, 0, 0.4);
+    {% if not theme.related_modal_close_button_visible %}
+    display: none;
+    {% endif %}
+}
+
+.admin-interface .related-modal .mfp-close:hover,
+.admin-interface .related-modal .mfp-close:active {
+    color: rgba(0, 0, 0, 0.6);
+    top: 0;
+}