From cc6938e5ebfeb6ac4c553976ebc3b0fa8ff58315 Mon Sep 17 00:00:00 2001
From: Liviu Iancuta <liviu.iancuta@gmail.com>
Date: Tue, 2 Jun 2020 09:18:09 +0300
Subject: [PATCH] Fix modal backdrop display on positioned elements

Place the modal backdrop element inside the widget container,
so that even if the widget is attached to positioned elements,
the modal backdrop does not hide the widget contents.

Fixes #109
Fixes #110
---
 src/assets/styles.css  |  3 +--
 src/assets/widget.html |  2 ++
 src/widget.js          | 13 -------------
 3 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index f35d29e..f999ab0 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -374,8 +374,7 @@ polygon.rs-logo-shape,
 
 .remotestorage-widget-modal-backdrop {
   display: none;
-  z-index: 20000000;
-  position: absolute;
+  position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
diff --git a/src/assets/widget.html b/src/assets/widget.html
index 59a4cb0..5708973 100644
--- a/src/assets/widget.html
+++ b/src/assets/widget.html
@@ -1,3 +1,5 @@
+<div class="remotestorage-widget-modal-backdrop"></div>
+
 <!--
   rs-state-initial
   rs-state-choose
diff --git a/src/widget.js b/src/widget.js
index bef18f7..e5675d1 100644
--- a/src/widget.js
+++ b/src/widget.js
@@ -174,18 +174,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).
@@ -270,7 +258,6 @@ Widget.prototype = {
    * @param  {String} [elementId] - Widget's parent
    */
   attach (elementId) {
-    this.createBackdropHtml()
     const domElement = this.createHtmlTemplate();
 
     let parentContainerEl;