修改模板实现PDF美观展示：替代Lightbox图片弹窗方案咨询

我正在修改模板以展示PDF文件，原模板点击链接会通过Lightbox弹窗显示图片，但把href改成PDF后无法加载（预期内情况）。删除data-lightbox属性能正常打开PDF，但希望能保留美观的展示效果，求解决方案。

原代码如下：

<div class="col-md-4 col-sm-6">
    <div class="item">
        <div class="thumb">
            <a href="script/Passing Time.pdf" data-lightbox="image-1"><div class="hover-effect">
                <div class="hover-content">
                    <h2>Passing Time</h2>
                    <p>At the end of Myla's life, she meets the one person to change it forever.</p>
                </div>
            </div></a>
            <div class="image">
                <img src="img/first_item.jpg">
            </div>
        </div>
    </div>
</div>

解决方案1：自定义Lightbox弹窗加载PDF #

如果不想更换插件，可以自己写JS和CSS实现兼容PDF的弹窗，保留原hover效果：

步骤1：添加JS代码

// 监听PDF链接点击事件
document.addEventListener('click', function(e) {
  const link = e.target.closest('a[data-lightbox][href$=".pdf"]');
  if (!link) return;
  
  e.preventDefault();
  const pdfUrl = link.getAttribute('href');
  
  // 创建弹窗元素
  const modal = document.createElement('div');
  modal.className = 'pdf-lightbox-modal';
  modal.innerHTML = `
    <div class="pdf-modal-content">
      <button class="pdf-modal-close">&times;</button>
      <iframe src="${pdfUrl}" width="100%" height="80vh"></iframe>
    </div>
  `;
  
  // 添加到页面
  document.body.appendChild(modal);
  
  // 关闭事件
  const closeBtn = modal.querySelector('.pdf-modal-close');
  function closeModal() {
    modal.remove();
    document.removeEventListener('click', outsideClick);
  }
  closeBtn.addEventListener('click', closeModal);
  
  // 点击弹窗外部关闭
  function outsideClick(e) {
    if (e.target === modal) closeModal();
  }
  document.addEventListener('click', outsideClick);
});

步骤2：添加CSS样式

/* 遮罩层 */
.pdf-lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 弹窗内容容器 */
.pdf-modal-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}

/* 关闭按钮 */
.pdf-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #666;
  transition: color 0.2s;
}

.pdf-modal-close:hover {
  color: #000;
}

/* iframe自适应 */
.pdf-modal-content iframe {
  border: none;
  border-radius: 4px;
}

解决方案2：替换为支持PDF的弹窗插件 #

比如使用Fancybox，它原生支持PDF弹窗展示，步骤如下：

1. 引入Fancybox的本地CSS和JS资源
2. 修改HTML代码：

<div class="col-md-4 col-sm-6">
    <div class="item">
        <div class="thumb">
            <a href="script/Passing Time.pdf" data-fancybox="pdf-gallery" data-type="iframe">
                <div class="hover-effect">
                    <div class="hover-content">
                        <h2>Passing Time</h2>
                        <p>At the end of Myla's life, she meets the one person to change it forever.</p>
                    </div>
                </div>
            </a>
            <div class="image">
                <img src="img/first_item.jpg">
            </div>
        </div>
    </div>
</div>

解决方案3：保留hover效果，新标签页打开PDF #

如果不想修改插件或写自定义代码，也可以让PDF在新标签页打开，同时在hover提示用户：

<div class="col-md-4 col-sm-6">
    <div class="item">
        <div class="thumb">
            <a href="script/Passing Time.pdf" target="_blank" rel="noopener noreferrer">
                <div class="hover-effect">
                    <div class="hover-content">
                        <h2>Passing Time</h2>
                        <p>At the end of Myla's life, she meets the one person to change it forever.</p>
                        <p style="font-size: 14px; margin-top: 10px; opacity: 0.8;">点击在新标签页查看PDF</p>
                    </div>
                </div>
            </a>
            <div class="image">
                <img src="img/first_item.jpg">
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Tony Whiteside