使用内置的 `show()` 和 `hide()` 函数后，Flowbite 模态不再打开

Question

我正在使用 Flowbite 模式向用户显示注册和登录表单。每个模式的底部都有一个用于切换到另一个模式的按钮，例如“还不是会员？注册。”或“已经有帐户？登录。”

这些按钮会触发函数

onclick

的

toggleSignInSignUpModals()

事件，完整如下所示：

function toggleSignInSignUpModals(e) {
  // Hard coded these here for ease of understanding. //
  var currentModalName = "authentication-modal";
  var otherModalName = "sign-in-modal";
  /////////////////////////////////////////////////////
  var currentModalElem = document.getElementById(currentModalName);
  var otherModalElem = document.getElementById(otherModalName);

  const options = {
    placement: 'center',
    backdrop: 'dynamic',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    closable: !0,
    onHide: function() {},
    onShow: function() {},
    onToggle: function() {}
  };

  var currentModalObj = new Modal(currentModalElem, options);
  currentModalObj.hide();

  var otherModalObj = new Modal(otherModalElem, options);
  otherModalObj.show();
}

在此功能中，我使用内置 Flowbite 功能

hide()

和

show()

在 2 个模式之间切换。有关这些的文档这里。

在两种模式之间切换时，此功能按预期工作。但是，在您在模态之间切换并关闭它们之后，模态都将停止运行（如下所示）：

注意： 此时值得一提的是，当在上下文之外使用模态时（不使用我的自定义函数），它们可以完美地工作。

供参考，这里是正在使用的 Flowbite javascript。

```
hide()
```
功能可以在线看到
```
2191
```
链接到线
```
show()
```
功能可以在线看到
```
2189
```
链接到线
我认为所有模态的东西都是从线上开始的
```
2106
```
链接到线

我尝试过的主要事情：

我尝试在
```
onclick
```
函数之外实例化模态，以避免每次用户在两个模态之间切换时都重新创建它们。这导致模态第二次成功打开，但随后无法正确关闭（模态叠加层未被删除）。
我有预感，这与 Flowbite 创建和销毁
```
Modal
```
对象的方式有关，也许除了
```
hide()
```
和
```
show()
```
之外，我还需要调用其他方法。所以我尝试过：
- 隐藏时设置
```
isHidden = true
```
  ，显示时设置
```
isHidden = false
```
  。
- 在我们隐藏的模态上调用
```
destroy()
```
  。
- 在我们隐藏的模态上调用
```
destroyAndRemoveInstance()
```
  。
- 在我们隐藏的模态上调用
```
removeInstance()
```
  。
- 在两个模态上调用
```
toggle()
```
  ，而不是
```
hide()
```
  和
```
show()
```
  。
我还怀疑这与仅使用
```
hide()
```
和
```
show()
```
未正确重置事件侦听器有关，但研究这两个函数表明
```
_removeModalCloseEventListeners()
```
和
```
_setupModalCloseEventListeners()
```
都被调用。

TLDR； 如何让这些模式正常运行？ :) 提前谢谢你。

Answer 1

我找到了一个解决方案（在 Flowbite 的创始人的帮助下，谢谢先生！）。

在

toggleSignInSignUpModals()

函数中：除了页面上已经存在的对象之外，我还创建了新的

Modal

对象。这导致每个 show()

 实例调用

hide()

和

Modal

 函数两次。

更具体地说：

eventListenerInstance

，这意味着用户无法再次打开它。

isHidden = false
```
，进一步导致 
```
this 行在函数 _destroyBackdropEl()
```
 内失败。
```

本质上，由于在每个模态上调用所有内容两次，模态状态全部被提升。

现在这是我的（工作）代码：

function toggleSignInSignUpModals(e) {
  var currentModalName = "some-name";
  var otherModalName = "some-other-name";

  var currentModalObj = FlowbiteInstances.getInstance('Modal', currentModalName);
  var otherModalObj = FlowbiteInstances.getInstance('Modal', otherModalName);

  currentModalObj.hide();
  otherModalObj.show();
}

这不是创建新的

Modal

 实例，而是查找页面上已有的实例并直接处理它们。

再次感谢

Zoltán Szőgyényi 在这方面的帮助！

使用内置的 `show()` 和 `hide()` 函数后，Flowbite 模态不再打开

问题描述投票：0回答：1

1个回答

最新问题

使用内置的 `show()` 和 `hide()` 函数后，Flowbite 模态不再打开

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1