使用basicLightbox加载外部TXT文件无法设置样式求助

问题根源 #

你用<object>加载TXT文件时，相当于嵌入了一个独立的文档，当前页面的CSS样式无法穿透到这个嵌入文档里，而且TXT本身不支持直接写样式，所以样式无法生效。另外basicLightbox自带默认的黑色背景样式，需要手动覆盖。

解决方案 #

放弃用<object>加载，改用fetch获取TXT内容后直接插入弹窗DOM，这样就能用CSS控制样式了，步骤如下：

1. 修改JavaScript代码，动态获取TXT内容并创建带自定义类的弹窗：

document.querySelector('button.html1001').onclick = async () => {
  // 异步获取TXT文件内容
  const res = await fetch('test.txt');
  const txtContent = await res.text();
  
  // 创建弹窗，给内容容器加自定义类方便样式控制
  basicLightbox.create(`
    <div class="txt-lightbox">
      <h2>文本内容</h2>
      <p>${txtContent}</p>
    </div>
  `).show();
}

2. 添加CSS样式，覆盖弹窗默认背景并自定义文本样式：

/* 修改弹窗的背景层颜色 */
.basicLightbox__overlay {
  background-color: #f5f5f5; /* 换成你需要的背景色 */
}

/* 自定义内容容器的尺寸和内边距 */
.txt-lightbox {
  max-width: 700px; /* 控制弹窗宽度 */
  padding: 2.5rem;
  box-sizing: border-box;
}

/* 自定义文本样式 */
.txt-lightbox h2 {
  color: #2d3748;
  margin-top: 0;
}

.txt-lightbox p {
  color: #4a5568;
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap; /* 保留TXT里的换行和空格 */
}

关键说明 #

• 用fetch获取TXT内容后，文本直接属于当前页面的DOM结构，CSS可以正常作用于它。
• white-space: pre-wrap可以保留TXT文件里的换行和空格，让展示效果和原TXT一致。
• 直接修改.basicLightbox__overlay可以替换弹窗的背景色，不需要额外嵌套容器。

内容的提问来源于stack exchange，提问作者Michael Reyes