From d5240baffcf0ea87945befd5ba5754c275a4af46 Mon Sep 17 00:00:00 2001 From: HotelSync Date: Sun, 12 Apr 2026 01:52:15 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20widget=20modal=20=E2=80=94=20explicit=20?= =?UTF-8?q?dialog=20height,=20iframe=20fills=20absolutely?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/widget-loader.js | 68 ++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/public/widget-loader.js b/public/widget-loader.js index 256eaa3..3be8362 100644 --- a/public/widget-loader.js +++ b/public/widget-loader.js @@ -11,75 +11,75 @@ var color = s.getAttribute('data-color') || '#4F46E5'; var cls = s.getAttribute('data-class') || 'hotelsync-book'; - // Append embed param so the page renders without its own wrapper var url = rawUrl + (rawUrl.indexOf('?') >= 0 ? '&' : '?') + 'embed=true'; function init() { /* ── Overlay ── */ var overlay = document.createElement('div'); overlay.style.cssText = [ - 'display:none', 'position:fixed', 'inset:0', - 'background:rgba(0,0,0,.55)', - 'backdrop-filter:blur(4px)', - '-webkit-backdrop-filter:blur(4px)', + 'display:none', + 'position:fixed', 'inset:0', + 'background:rgba(0,0,0,.6)', + 'backdrop-filter:blur(6px)', + '-webkit-backdrop-filter:blur(6px)', 'z-index:99998', - 'align-items:center', 'justify-content:center', - 'padding:20px', 'box-sizing:border-box', + 'align-items:center', + 'justify-content:center', + 'padding:16px', + 'box-sizing:border-box', ].join(';'); - /* ── Dialog box ── */ + /* ── Dialog — explicit height so iframe fills it ── */ var dialog = document.createElement('div'); dialog.style.cssText = [ 'position:relative', - 'width:100%', 'max-width:480px', - 'max-height:calc(100vh - 40px)', - 'border-radius:24px', + 'width:100%', + 'max-width:480px', + 'height:90vh', + 'max-height:720px', + 'border-radius:20px', 'overflow:hidden', - 'box-shadow:0 32px 80px rgba(0,0,0,.4)', + 'box-shadow:0 24px 64px rgba(0,0,0,.45)', 'background:#fff', - 'display:flex', 'flex-direction:column', ].join(';'); - /* ── Close button (outside iframe, top-right of dialog) ── */ + /* ── Close button — top-right corner of dialog ── */ var closeBtn = document.createElement('button'); closeBtn.innerHTML = '✕'; closeBtn.title = 'Закрыть'; closeBtn.style.cssText = [ - 'position:absolute', 'top:12px', 'right:12px', 'z-index:10', + 'position:absolute', 'top:14px', 'right:14px', 'z-index:10', 'width:34px', 'height:34px', 'border-radius:50%', - 'background:rgba(255,255,255,.9)', - 'backdrop-filter:blur(4px)', + 'background:rgba(255,255,255,.95)', 'color:#374151', - 'border:1px solid rgba(0,0,0,.1)', + 'border:1px solid rgba(0,0,0,.12)', 'cursor:pointer', - 'font-size:14px', 'font-weight:700', + 'font-size:15px', 'font-weight:700', 'display:flex', 'align-items:center', 'justify-content:center', - 'box-shadow:0 2px 8px rgba(0,0,0,.15)', - 'transition:background .15s', + 'box-shadow:0 2px 8px rgba(0,0,0,.12)', + 'transition:background .15s,transform .1s', ].join(';'); - closeBtn.onmouseenter = function () { closeBtn.style.background = '#fff'; }; - closeBtn.onmouseleave = function () { closeBtn.style.background = 'rgba(255,255,255,.9)'; }; + closeBtn.onmouseenter = function () { closeBtn.style.transform = 'scale(1.1)'; }; + closeBtn.onmouseleave = function () { closeBtn.style.transform = 'scale(1)'; }; closeBtn.onclick = function () { overlay.style.display = 'none'; }; - /* ── Iframe ── */ + /* ── Iframe fills dialog completely ── */ var iframe = document.createElement('iframe'); iframe.src = url; iframe.setAttribute('allow', 'payment'); iframe.style.cssText = [ - 'width:100%', 'height:680px', - 'border:none', 'display:block', - 'flex:1', + 'position:absolute', 'inset:0', + 'width:100%', 'height:100%', + 'border:none', ].join(';'); - dialog.appendChild(closeBtn); dialog.appendChild(iframe); + dialog.appendChild(closeBtn); // on top of iframe overlay.appendChild(dialog); overlay.addEventListener('click', function (e) { if (e.target === overlay) overlay.style.display = 'none'; }); - - // Close on Escape document.addEventListener('keydown', function (e) { if (e.key === 'Escape') overlay.style.display = 'none'; }); @@ -99,16 +99,16 @@ 'font-size:15px', 'font-family:inherit', 'font-weight:700', 'letter-spacing:.01em', 'cursor:pointer', 'z-index:99997', - 'box-shadow:0 6px 24px rgba(0,0,0,.25)', + 'box-shadow:0 6px 24px rgba(0,0,0,.28)', 'transition:transform .15s,box-shadow .15s', ].join(';'); fab.onmouseenter = function () { - fab.style.transform = 'translateY(-2px) scale(1.03)'; - fab.style.boxShadow = '0 10px 32px rgba(0,0,0,.32)'; + fab.style.transform = 'translateY(-2px)'; + fab.style.boxShadow = '0 10px 32px rgba(0,0,0,.35)'; }; fab.onmouseleave = function () { fab.style.transform = 'none'; - fab.style.boxShadow = '0 6px 24px rgba(0,0,0,.25)'; + fab.style.boxShadow = '0 6px 24px rgba(0,0,0,.28)'; }; fab.onclick = function () { window.hsOpenWidget(); }; document.body.appendChild(fab);