To open Summary Lightbox on Header button click, like this
#1. First, create a page with Name/URL: Popup Content – /popup-content
#2. Add Summary Block then find IDs
#3. Next, click on Header button > Click Link icon
Enter popup url, use this format: #popup-hover=/popup-content#enter-summary-block-id
For example: #popup-hover=/popup-content#block-yui_3_17_2_1_1755047855611_6298
#4. Next, use this code to Custom CSS
You can also use this Popup plugin instead, so you can do Summary Block in lightbox on Header button click easier without using complex code.
/* Popup style */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.popup-overlay.show {
opacity: 1;
visibility: visible;
}
.popup-modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
background: #fff;
border-radius: 12px;
max-width: 500px;
max-height: 80vh;
width: 90%;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.popup-modal:hover {
/* Keep popup open when hovering over it */
}
.popup-overlay.show .popup-modal {
transform: translate(-50%, -50%) scale(1);
}
.popup-header {
position: relative;
padding: 20px 50px 20px 20px;
border-bottom: 1px solid #eee;
}
.popup-close {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border: none;
background: transparent;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.popup-close:hover {
background: #f0f0f0;
}
.popup-content {
padding: 20px;
max-height: 60vh;
overflow-y: auto;
line-height: 1.6;
}
.popup-loading {
text-align: center;
padding: 40px 20px;
color: #666;
font-style: italic;
}
.popup-error {
text-align: center;
padding: 40px 20px;
color: #e74c3c;
font-style: italic;
}
#5. Next, use this code to Code Injection > Footer (or Page Header Injection)
<script>document.addEventListener('DOMContentLoaded',function(){const CONFIG={popupPageUrl:'/popup-content'};let popupOverlay=null;function createPopup(){const overlay=document.createElement('div');overlay.className='popup-overlay';const modal=document.createElement('div');modal.className='popup-modal';const header=document.createElement('div');header.className='popup-header';const closeBtn=document.createElement('button');closeBtn.className='popup-close';closeBtn.innerHTML='×';closeBtn.addEventListener('click',hidePopup);const content=document.createElement('div');content.className='popup-content';header.appendChild(closeBtn);modal.appendChild(header);modal.appendChild(content);overlay.appendChild(modal);document.body.appendChild(overlay);overlay.addEventListener('click',function(e){if(e.target===overlay){hidePopup()}});return overlay}
async function initializeNewsletter(contentElement){try{if(typeof wm$!=='undefined'&&wm$.reloadSquarespaceLifecycle){await wm$.reloadSquarespaceLifecycle(contentElement)}else if(typeof Squarespace!=='undefined'&&typeof Y!=='undefined'){Squarespace.initializeLayoutBlocks(Y);Squarespace.initializeCommerce(Y);const newsletterBlocks=contentElement.querySelectorAll('.sqs-block-newsletter');if(newsletterBlocks.length>0){Squarespace.initializeNewsletter(Y,Y.one(contentElement))}
const formBlocks=contentElement.querySelectorAll('.sqs-block-form');if(formBlocks.length>0){Squarespace.initializeFormBlocks(Y,Y.one(contentElement))}}
setTimeout(()=>{const scripts=contentElement.querySelectorAll('script');scripts.forEach(script=>{if(script.textContent&&!script.src){try{eval(script.textContent)}catch(e){console.warn('Script execution failed:',e)}}})},100)}catch(error){console.error('Newsletter initialization error:',error)}}
async function showPopup(content){if(!popupOverlay){popupOverlay=createPopup()}
const contentDiv=popupOverlay.querySelector('.popup-content');contentDiv.innerHTML=content;popupOverlay.classList.add('show');document.body.style.overflow='hidden';await initializeNewsletter(contentDiv)}
function hidePopup(){if(popupOverlay){popupOverlay.classList.remove('show');document.body.style.overflow=''}}
const cache=new Map();async function fetchPopupContent(blockId){const cacheKey=`${CONFIG.popupPageUrl}-${blockId}`;if(cache.has(cacheKey)){return cache.get(cacheKey)}
try{const response=await fetch(CONFIG.popupPageUrl);if(!response.ok)throw new Error(`HTTP ${response.status}`);const html=await response.text();const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');const targetElement=doc.querySelector(blockId);if(targetElement){const content=targetElement.outerHTML.trim()||'No content found';cache.set(cacheKey,content);return content}else{throw new Error('Block not found')}}catch(error){console.error('Fetch failed:',error);throw error}}
function extractBlockId(href){const match=href.match(/#(block-[^#]+)$/);return match?'#'+match[1]:null}
const popupLinks=document.querySelectorAll('a[href*="#popup-hover="]');popupLinks.forEach(link=>{const blockId=extractBlockId(link.getAttribute('href'));if(!blockId)return;link.addEventListener('click',async function(e){e.preventDefault();showPopup('<div class="popup-loading">Loading...</div>');try{const content=await fetchPopupContent(blockId);showPopup(content)}catch(error){showPopup('<div class="popup-error">Failed to load content</div>')}})});document.addEventListener('keydown',function(e){if(e.key==='Escape'&&popupOverlay&&popupOverlay.classList.contains('show')){hidePopup()}})});</script>
