点击“x”或“关闭”按钮时，Bootstrap模态框无法关闭

Question

当单击打开模式时，模式显示得很好，并且关闭按钮表明我的鼠标悬停在它们上方，但是单击时什么也没有发生，并且模式保持打开状态。以前有人遇到/解决过这个问题吗？我在这里看到的只是添加“data-bs-dismiss”，但这并没有对模式产生影响。我是引导程序的新手，所以任何和所有的帮助将不胜感激！代码如下，链接到完整代码-

P粉968008175 · Answer

有几个问题。

让我们从创建橙色戳按钮的方式开始。

function addListItem(pokemon) {
    let listItem = $('');
    let button = $('');
    listItem.append(button);
    pokemonListElement.append(listItem);
    button.on('click', function(){
      showDetails(pokemon);
    });
  }

这似乎没问题......但是：

let button = $('');

看看 data target="#modal-container 。缺少一个连字符，而不是这个

data target="#modal-container"

它应该看起来像这样：

data-target="#modal-container"

接下来，您的 showDetailsModal(pokemon) 函数中不需要包含此行：

modalContainer.classList.add('show');

data-target 和 data-toggle 将为您介绍该部分。

最后，您的 CSS 似乎将模态的背景放在模态的顶部。更改此：

#modal-container {
    ...
    z-index: 999;
    ...
}

更改为其他内容（例如，1051，或者您可以将其删除，然后让 Bootstrap 为您处理），因为背景的 z-index 为 1040。

点击“x”或“关闭”按钮时，Bootstrap模态框无法关闭

全部回复(1)我来回复