Amp html 如何在提交错误时有条件地打开lightbox？

我有一个

amp表单

，它提交了一个带有

POST

的地址，还有两种不同类型的错误可以返回：

{error:“precisionRequired”}

和

{error:“invalidZipcode”}

我还有2个

amp lightbox

，带有相应的文本和表单，以防用户地址出现错误，因此我想根据我得到的错误打开正确的lightbox

以下是我的代码片段：

<form method="POST" action-xhr="/epiceries"
  on="submit-success: AMP.navigateTo(url='/epiceries'); submit-error: precisionRequired.open">
  <input type="text" name="address">
  <button type="submit"> Submit </button>
</form>

<amp-lightbox id="invalidZipcode" layout="nodisplay">
  [... some form when the zipcode is not deliverable]
</amp-lightbox>

<amp-lightbox id="precisionRequired" layout="nodisplay">
  [... some content to ask the user to give us a complete address, not just a city :) ]
</amp-lightbox>

提交
[…zipcode无法交付时的某种形式]
[…一些内容要求用户提供完整的地址，而不仅仅是城市：）]

我知道我可以使用状态有条件地在单个灯箱中渲染我感兴趣的部分，如下所示：

<form method="POST" action-xhr="/epiceries"
  on="submit-success: AMP.navigateTo(url='/epiceries'); submit-error: AMP.setState({error: event.response.error}), lightbox.open">
  <input type="text" name="address">
  <button type="submit"> Submit </button>
</form>

<amp-lightbox id="lightbox>
  <div [class]="error == 'invalidZipcode' ? '' : 'hidden'">
    [... some form when the zipcode is not deliverable]
  </div>

  <div [class]="error == 'precisionRequired' ? '' : 'hidden'">
    [... some content to ask the user to give us a complete address, not just a city :) ]
  </div>
</amp-lightbox>

提交
您可以使用CSS实现自己的lightbox，并根据结果显示：

<div id="lightboxErrorZipcode" class="lightbox" 
     [hidden]="error !== 'invalidZipcode'" hidden>
    [... some form when the zipcode is not deliverable]
  <button on="tap:lightboxErrorZipcode.close">Close</button>
</div>
...


[…zipcode无法交付时的某种形式]
接近
...

就个人而言，我会使用您描述的有条件地呈现lightbox内容的方法（一个建议是使用我的示例中的隐藏属性）。这样，您就不需要在CSS中重新定义lightbox行为。
使用CSS重新定义lightbox将松开ESC或后台单击以关闭它，对吗？所以我想剩下的唯一选项是1
amp lightbox
和2
div
有条件地隐藏它们自己：/谢谢你的帮助关于ESC你是对的，很好，忘了这一点。您可以使用关闭按钮来实现后台关闭操作。