fancybox - 奇怪的花式盒子行为

问题描述

面临以下问题。有一个链接。当您单击它时，会出现一个带有复选框的表单。

默认情况下，复选框都处于未选中位置 - 即未选中

有必要在用户关闭弹出窗口时，使这些复选框在重新打开时处于页面加载时的状态。

也就是说，如果在第一次点击时，fancybox-window 打开，并且所有复选框都没有被选中，然后用户注意到，例如，2 of 3，改变主意，关闭带有 2 个复选框的窗口，并且然后再次打开窗口，使复选框再次被取消选中，也就是说，就像用户第一次访问该页面一样。

这是一个例子::代码

<body>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<div id="form" style="display:none;">
  <input type="checkbox" name="check_1"/>
  <input type="checkbox" name="check_2" checked/>
  <input type="checkbox" name="check_3"/>
  <input type="checkbox" name="check_4"/>
  <input type="checkbox" name="check_5"/>
</div>

<a class="fancybox" href="#form" data-fancybox>Open Modal</a>
</body>

我这样做是为了默认情况下只标记顶部的第二个复选框。如果用户标记了更多的复选框，或者标记了所有内容，或者删除了所有内容，那么当他关闭窗口并重新打开它时，这是必要的，这样就有了表单的初始状态。

因为在一个真实的项目中，由于某种原因，fancybox 似乎“保存”了表单的状态，当你重新打开这个弹出窗口时，数据不再是默认的，尽管用户关闭了窗口，并且，因为它是，他的选择“改变了主意”。

请帮忙，有人能遇到这个吗？

标签： fancybox

这不是“奇怪的行为”，而是 Fancybox 的一大特色——显示 DOM 元素并在关闭后放回原处。因此，所有用户所做的更改在关闭后都会保留在那里。

如果您不想保留更改，您可以显示一个克隆的元素，只需添加data-type="clone"到您的链接。

fancybox - 奇怪的花式盒子行为

问题描述

解决方案

推荐阅读