Das modale Bootstrap-Feld kann nicht geschlossen werden, wenn auf die Schaltfläche „X' oder „Schließen' geklickt wird

Question

Wenn ich klicke, um das Modal zu öffnen, wird das Modal einwandfrei angezeigt und die Schaltfläche „Schließen“ zeigt an, dass meine Maus darüber schwebt, aber wenn ich darauf klicke, passiert nichts und das Modal bleibt geöffnet. Hat jemand dieses Problem schon einmal festgestellt/gelöst? Ich sehe hier nur das Hinzufügen von „data-bs-dismiss“, aber das hat keine Auswirkungen auf das Schema. Ich bin neu im Bootstrap-Bereich, daher wäre ich für jede Hilfe sehr dankbar! Der Code lautet wie folgt: Link zum vollständigen Code:

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。