Refactor Modal view

src/modal_dialog/view/ModalView.js

@@ -3,33 +3,36 @@ module.exports = require('backbone').View.extend({
     return `<div class="${pfx}dialog ${ppfx}one-bg ${ppfx}two-color">
       <div class="${pfx}header">
         <div class="${pfx}title">${title}</div>
-        <div class="${pfx}btn-close">&Cross;</div>
+        <div class="${pfx}btn-close" data-close-modal>&Cross;</div>
       </div>
       <div class="${pfx}content">
         <div id="${pfx}c">${content}</div>
         <div style="clear:both"></div>
       </div>
     </div>
-    <div class="${pfx}backlayer"></div>
     <div class="${pfx}collector" style="display: none"></div>`;
   },
 
-  events: {},
+  events: {
+    click: 'onClick',
+    'click [data-close-modal]': 'hide'
+  },
 
   initialize(o) {
     const model = this.model;
     const config = o.config || {};
     const pfx = config.stylePrefix || '';
-    const bkd = config.backdrop;
     this.config = config;
     this.pfx = pfx;
     this.ppfx = config.pStylePrefix || '';
     this.listenTo(model, 'change:open', this.updateOpen);
     this.listenTo(model, 'change:title', this.updateTitle);
     this.listenTo(model, 'change:content', this.updateContent);
-    this.events[`click .${pfx}btn-close`] = 'hide';
-    bkd && (this.events[`click .${pfx}backlayer`] = 'hide');
-    this.delegateEvents();
+  },
+
+  onClick(e) {
+    const bkd = this.config.backdrop;
+    bkd && e.target === this.el && this.hide();
   },
 
   /**

src/styles/scss/_gjs_modal.scss

@@ -1,24 +1,14 @@
 .#{$mdl-prefix} {
-  &backlayer {
-    @include opacity(0.5);
-
-    background-color: #000;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-  }
-
   &container {
     font-family: $mainFont;
-    position: absolute;
+    overflow-y: auto;
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.5);
     top: 0;
     left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 10;
-    width: 100%;
-    height: 100%;
   }
 
   &dialog {