如何为AMP Stories添加关闭按钮（不使用amp-story-play）

方案一：通过自定义CSS强制覆盖隐藏样式 #

这是最简单的实现方式，无需修改JS或官方源码，直接利用AMP允许的自定义样式强制显示按钮：
在页面的<style amp-custom>标签中添加以下样式：

.i-amphtml-story-close-control.i-amphtml-story-ui-hide-button {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

注意要确保这段代码放在AMP合法的<style amp-custom>区域内，不要使用外部样式文件。

方案二：使用amp-script延迟修改DOM #

之前普通JS拿不到元素是因为AMP组件加载顺序问题，amp-script是AMP官方允许的安全JS执行方式，能确保元素渲染完成后再操作：

1. 先引入amp-script组件：

<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>

2. 添加内联脚本和执行标签：

<script type="text/plain" id="toggle-close-btn">
  const closeButton = document.querySelector('.i-amphtml-story-close-control');
  if (closeButton) {
    closeButton.classList.remove('i-amphtml-story-ui-hide-button');
  }
</script>
<amp-script layout="nodisplay" src="#toggle-close-btn"></amp-script>

amp-script会在AMP页面组件加载完成后触发执行，避免出现元素为null的问题。

方案三：检查AMP Stories官方配置（按需使用） #

如果你的AMP Story是通过嵌入方式使用，可查看官方文档中是否有显示关闭按钮的配置参数，部分场景下可以直接通过添加属性或参数来启用，无需修改样式或JS。

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