golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: widget modal — explicit dialog height, iframe fills absolutely

Browse Source
This commit is contained in:
HotelSync
2026-04-12 01:52:15 +03:00
parent c144793ae5
commit d5240baffc
1 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/widget-loader.js
View File

@@ -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);