Merge pull request #112 from remotestorage/bugfix/109_backdrop_on_mobile_devices

Fix modal backdrop display

Author: Sebastian Kippe

src/assets/styles.css

@@ -391,8 +391,7 @@ polygon.rs-logo-shape,
 
 .remotestorage-widget-modal-backdrop {
   display: none;
-  z-index: 20000000;
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;

src/assets/widget.html

@@ -1,3 +1,5 @@
+<div class="remotestorage-widget-modal-backdrop"></div>
+
 <!--
   rs-state-initial
   rs-state-choose

src/widget.js

@@ -180,18 +180,6 @@ Widget.prototype = {
     return element;
   },
 
-  /**
-   * Create the widget's modal backdrop element, add
-   * styling, and append to DOM
-   *
-   * @private
-   */
-  createBackdropHtml () {
-    const backdropEl = document.createElement('div');
-    backdropEl.classList.add('remotestorage-widget-modal-backdrop');
-    document.body.appendChild(backdropEl);
-  },
-
   /**
    * Sets the `rs-modal` class on the widget element.
    * Done by default for small screens (max-width 420px).
@@ -277,7 +265,6 @@ Widget.prototype = {
    * @param  {String} [elementId] - Widget's parent
    */
   attach (elementId) {
-    this.createBackdropHtml()
     const domElement = this.createHtmlTemplate();
 
     let parentContainerEl;