diff --git a/public/lib/dialog-polyfill.css b/public/lib/dialog-polyfill.css index 6b38bf08b..6dee42bff 100644 --- a/public/lib/dialog-polyfill.css +++ b/public/lib/dialog-polyfill.css @@ -1,4 +1,4 @@ -dialog { +.poly_dialog { position: absolute; left: 0; right: 0; width: -moz-fit-content; @@ -15,22 +15,22 @@ dialog { display: block; } -dialog:not([open]) { +.poly_dialog:not([open]) { display: none; } -dialog + .backdrop { +.poly_dialog + .backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.1); } -._dialog_overlay { +._poly_dialog_overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } -dialog.fixed { +.poly_dialog.fixed { position: fixed; top: 50%; transform: translate(0, -50%); diff --git a/public/lib/dialog-polyfill.esm.js b/public/lib/dialog-polyfill.esm.js index da774bc98..f40e02f58 100644 --- a/public/lib/dialog-polyfill.esm.js +++ b/public/lib/dialog-polyfill.esm.js @@ -562,7 +562,7 @@ dialogPolyfill.DialogManager = function() { // actual implementation, the modal dialog stacking is controlled by the // top layer, where z-index has no effect. this.overlay = document.createElement('div'); - this.overlay.className = '_dialog_overlay'; + this.overlay.className = '_poly_dialog_overlay'; this.overlay.addEventListener('click', function(e) { this.forwardTab_ = undefined; e.stopPropagation(); diff --git a/public/scripts/popup.js b/public/scripts/popup.js index 2be36f2ed..907061428 100644 --- a/public/scripts/popup.js +++ b/public/scripts/popup.js @@ -179,7 +179,10 @@ export class Popup { const template = document.querySelector('#popup_template'); // @ts-ignore this.dlg = template.content.cloneNode(true).querySelector('.popup'); - dialogPolyfill.registerDialog(this.dlg); + if (!this.dlg.showModal) { + this.dlg.classList.add("poly_dialog"); + dialogPolyfill.registerDialog(this.dlg); + } this.body = this.dlg.querySelector('.popup-body'); this.content = this.dlg.querySelector('.popup-content'); this.mainInput = this.dlg.querySelector('.popup-input');