diff --git a/modules/backend/behaviors/RelationController.php b/modules/backend/behaviors/RelationController.php
index 293051679c..6e7e8be75a 100644
--- a/modules/backend/behaviors/RelationController.php
+++ b/modules/backend/behaviors/RelationController.php
@@ -685,12 +685,18 @@ protected function makeViewWidget()
             $config->recordUrl = $this->getConfig('view[recordUrl]');
             $config->customViewPath = $this->getConfig('view[customViewPath]');
             $config->noRecordsMessage = $this->getConfig('view[noRecordsMessage]');
+            $config->size = $this->getConfig('manage[size]');
+            $config->cssClass = $this->getConfig('manage[cssClass]');
+            $config->allowDismiss = $this->getConfig('manage[allowDismiss]');
 
             $defaultOnClick = sprintf(
-                "$.wn.relationBehavior.clickViewListRecord(':%s', '%s', '%s')",
+                "$.wn.relationBehavior.clickViewListRecord(':%s', '%s', '%s', '%s', '%s', '%s')",
                 $this->relationModel->getKeyName(),
                 $this->relationGetId(),
-                $this->relationGetSessionKey()
+                $this->relationGetSessionKey(),
+                $config->size,
+                $config->cssClass,
+                $config->allowDismiss
             );
 
             if ($config->recordUrl) {
diff --git a/modules/backend/behaviors/relationcontroller/assets/js/winter.relation.js b/modules/backend/behaviors/relationcontroller/assets/js/winter.relation.js
index 5af54ebeed..a2c9e076c4 100644
--- a/modules/backend/behaviors/relationcontroller/assets/js/winter.relation.js
+++ b/modules/backend/behaviors/relationcontroller/assets/js/winter.relation.js
@@ -9,14 +9,20 @@
             $(el).closest('.control-list').listWidget('toggleChecked', [el])
         }
 
-        this.clickViewListRecord = function(recordId, relationId, sessionKey) {
+        this.clickViewListRecord = function(recordId, relationId, sessionKey, size, cssClass, allowDismiss) {
             var newPopup = $('<a />'),
                 $container = $('#'+relationId),
                 requestData = paramToObj('data-request-data', $container.data('request-data'))
 
+            if (!size) {
+                size = 'huge'
+            }
+
             newPopup.popup({
                 handler: 'onRelationClickViewList',
-                size: 'huge',
+                size: size,
+                cssClass: cssClass,
+                allowDismiss: allowDismiss,
                 extraData: $.extend({}, requestData, {
                     'manage_id': recordId,
                     '_session_key': sessionKey
diff --git a/modules/system/assets/ui/js/popup.js b/modules/system/assets/ui/js/popup.js
index c6b6b0ac0a..7f0bce777f 100644
--- a/modules/system/assets/ui/js/popup.js
+++ b/modules/system/assets/ui/js/popup.js
@@ -49,7 +49,9 @@
         content: null,
         size: null,
         adaptiveHeight: false,
-        zIndex: null
+        zIndex: null,
+        cssClass: null,
+        allowDismiss: false
     }
 
     Popup.prototype.init = function(){
@@ -207,8 +209,22 @@
         if (this.options.adaptiveHeight)
             modalDialog.addClass('adaptive-height')
 
+        if (this.options.cssClass)
+            modalDialog.addClass(this.options.cssClass)
+
         if (this.options.zIndex !== null)
             modal.css('z-index', this.options.zIndex + 20)
+        
+        if (this.options.allowDismiss) {
+            modal.on('mousedown', function(e) {
+                const target = e.target;
+                if (target.classList.contains('control-popup')) {
+                    modal.hide()
+                    $('.popup-backdrop').remove()
+                    $(document.body).removeClass('modal-open')
+                }
+            });
+        }
 
         return modal.append(modalDialog.append(modalContent))
     }
diff --git a/modules/system/assets/ui/storm-min.js b/modules/system/assets/ui/storm-min.js
index 1388218af3..ba2199dc1d 100644
--- a/modules/system/assets/ui/storm-min.js
+++ b/modules/system/assets/ui/storm-min.js
@@ -2053,7 +2053,7 @@ this.initEvents()
 this.init()}
 Popup.prototype=Object.create(BaseProto)
 Popup.prototype.constructor=Popup
-Popup.DEFAULTS={ajax:null,handler:null,keyboard:true,extraData:{},content:null,size:null,adaptiveHeight:false,zIndex:null}
+Popup.DEFAULTS={ajax:null,handler:null,keyboard:true,extraData:{},content:null,size:null,adaptiveHeight:false,zIndex:null,cssClass:null,allowDismiss:false}
 Popup.prototype.init=function(){var self=this
 if(self.isOpen)return
 this.setBackdrop(true)
@@ -2097,8 +2097,11 @@ BaseProto.dispose.call(this)}
 Popup.prototype.createPopupContainer=function(){var modal=$('<div />').prop({class:'control-popup modal fade',role:'dialog',tabindex:-1}),modalDialog=$('<div />').addClass('modal-dialog'),modalContent=$('<div />').addClass('modal-content')
 if(this.options.size)modalDialog.addClass('size-'+this.options.size)
 if(this.options.adaptiveHeight)modalDialog.addClass('adaptive-height')
+if(this.options.cssClass)modalDialog.addClass(this.options.cssClass)
 if(this.options.zIndex!==null)modal.css('z-index',this.options.zIndex+20)
-return modal.append(modalDialog.append(modalContent))}
+if(this.options.allowDismiss){modal.on('mousedown',function(e){const target=e.target;if(target.classList.contains('control-popup')){modal.hide()
+$('.popup-backdrop').remove()
+$(document.body).removeClass('modal-open')}});}return modal.append(modalDialog.append(modalContent))}
 Popup.prototype.setContent=function(contents){this.$content.html(contents)
 this.setLoading(false)
 this.show()
@@ -4677,4 +4680,4 @@ data[option].apply(data,methodArguments)}}})}
 $.fn.listSortable.Constructor=ListSortable
 $.fn.listSortable.noConflict=function(){$.fn.listSortable=old
 return this}
-$(document).render(function(){$('[data-control=list-sortable]').listSortable()})}(window.jQuery);
\ No newline at end of file
+$(document).render(function(){$('[data-control=list-sortable]').listSortable()})}(window.jQuery);