点击“x”或“关闭”按钮时，Bootstrap模态框无法关闭-PHP中文网问答

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name= "viewport" content ="width=device-width, initial-scale=1">
    <title>Pokedex</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="./CSS/styles.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="js/scripts.js" defer></script>

  </head>
  <body>
    

    <div class="pokedex">
      <h1 class="pokemon-header">Pokedex</h1>
      <ul class="pokemon-list list-group"></ul></div>
      
      <div class="modal" id="modal-container" tabindex="-1" role="dialog" aria-labelledby="modal-container" aria-modal="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h2 class="modal-title"></h2>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>


            <div class="modal-body">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
      <script src="js/promise-polyfill.js"></script>
      <script src="js/fetch-polyfill.js"></script>
    </body>
</html>

全部回复(1)

P粉9680081752024-03-30 23:04:31 1楼

有几个问题。

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

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。

赞 +0

添加回复