非服务端语言实现：将骑行活动页面改为弹窗版并加样式表

嘿，这个需求完全可以纯前端实现，不用碰服务器端代码！我给你整理了一套完整的方案，分步骤来做就行：

1. 给原页面加一个弹窗触发按钮 #

先在rallye_de_la_malmaison.html里找个合适的位置（比如活动介绍区顶部、导航栏附近），加个按钮来唤起弹窗：

<button id="openCueSheetModal">打开可打印骑行提示表弹窗</button>

2. 插入弹窗的HTML结构 #

在页面的<body>标签最后面，添加弹窗的DOM元素，默认是隐藏状态的：

<!-- 弹窗容器 -->
<div id="cueSheetModal" class="modal">
  <div class="modal-content">
    <!-- 关闭按钮 -->
    <span class="close">&times;</span>
    <!-- 这里放骑行提示表的内容 -->
    <div id="modalCueSheet">
      <!-- 你可以直接把原页面里的cue-sheet内容复制到这里，或者后面用JS动态同步 -->
    </div>
  </div>
</div>

3. 编写弹窗+打印专属的样式表 #

新建一个modal-print-styles.css文件，里面包含弹窗的显示样式，以及专门针对打印的优化规则：

/* 弹窗基础样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4); /* 半透明遮罩 */
}

.modal-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #ddd;
  width: 80%;
  max-width: 850px; /* 限制宽度，适配打印纸尺寸 */
}

.close {
  color: #999;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #333;
}

/* 打印专属样式 - 仅在打印时生效 */
@media print {
  /* 隐藏页面其他所有内容 */
  body > *:not(#cueSheetModal) {
    display: none !important;
  }

  /* 弹窗在打印时铺满页面，去掉遮罩和边框 */
  .modal {
    display: block !important;
    position: static;
    background-color: transparent;
  }

  .modal-content {
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
  }

  /* 隐藏关闭按钮 */
  .close {
    display: none;
  }

  /* 自定义cue-sheet的打印样式，比如调整字体、行高 */
  #modalCueSheet {
    font-family: "Arial", sans-serif;
    line-height: 1.5;
    padding: 1cm; /* 留边距适配打印 */
  }
}

然后在原页面的<head>里引入这个样式表：

<link rel="stylesheet" href="modal-print-styles.css">

4. 用JS实现弹窗的显示/隐藏逻辑 #

在页面<body>末尾添加一段JavaScript代码，处理按钮点击、关闭弹窗的交互：

// 获取弹窗相关元素
const modal = document.getElementById('cueSheetModal');
const openBtn = document.getElementById('openCueSheetModal');
const closeBtn = document.querySelector('.close');

// 点击按钮打开弹窗
openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
  // 可选：如果原页面的cue-sheet内容可能更新，这里可以动态复制原内容
  // const originalCueSheet = document.querySelector('.your-original-cue-sheet-class');
  // if (originalCueSheet) {
  //   document.getElementById('modalCueSheet').innerHTML = originalCueSheet.innerHTML;
  // }
});

// 点击关闭按钮关闭弹窗
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

// 点击弹窗外部区域关闭弹窗
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

// 可选：在弹窗里加个打印按钮
const printBtn = document.createElement('button');
printBtn.textContent = '打印骑行提示表';
printBtn.style.marginTop = '15px';
printBtn.addEventListener('click', () => {
  window.print();
});
document.querySelector('.modal-content').appendChild(printBtn);

5. 可选优化：动态同步原页面的cue-sheet内容 #

如果原页面的骑行提示表内容会更新，不想每次手动复制到弹窗里，可以用JS自动同步。只需要把上面代码里注释的部分打开，替换your-original-cue-sheet-class为原页面中cue-sheet元素的类名或选择器就行。

这样用户点击按钮就能打开弹窗，里面的内容可以直接打印，而且打印时只会显示cue-sheet的内容，不会带页面其他元素~

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