To open Social Icons in lightbox on List button click, like this
You can follow these steps.
#1. First, create a page with Name/URL: Popup Content – /popup-content
#2. Add Social Icons (use Social Links Block) then find IDs
#3. Edit each item button > Click Attach Link
Enter popup url, use this format: #popup-hover=/popup-content#enter-social-links-block-id
For example: #popup-hover=/popup-content#block-yui_3_17_2_1_1755072439738_26640
#4. Next, use this code to Custom CSS
/* 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)
You can also use this Popup plugin instead, so you can do Social Icons in lightbox on button click easier without using complex code.
<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 showPopup(content){if(!popupOverlay){popupOverlay=createPopup()}
const contentDiv=popupOverlay.querySelector('.popup-content');contentDiv.innerHTML=content;popupOverlay.classList.add('show');document.body.style.overflow='hidden'}
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>')}})})});</script>
