Bootstrap 4 Modal弹出窗口无法关闭

Question

我做了一个匹配游戏的项目。在所有卡片匹配和游戏结束后，会弹出一个祝贺模式。但是我不知道为什么在点击再次播放按钮后它没有关闭。

这里是模态窗口的 index.html

<!--Add Bootstrap Modal Alert Window-->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
    <div class="modal-dialog">
        <!--Modal Content-->
        <div class="modal-content">

            <!--Modal Header-->
            <div class="modal-header">
                <h4 class="modal-title" id="myModal-label">Congratulations!!!</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>

            <!--Modal Body-->
            <div class="modal-body">
                <p id="myText"></p>
            </div>

            <!--Modal Footer-->
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn btn-success btn-default" onclick="gameStart(), $rating.removeClass('fa-star-o').addClass('fa-star');">Play Again!</button>
            </div> <!--modal footer-->
          </div> <!--modal-content-->
    </div> <!--modal-dialog-->
</div> <!--modal-->  

还有用于 Modal 的 javascript：

function gameOver(moves, score) {
$('#myText').text(`Time: ${second} Seconds, Your Move: ${moves} Moves, Total 
Score: ${score}, Well done!!!`);
$('#myModal').toggle(); 
}

if (totalCard === match) {
        rating(moves);
        let score = rating(moves).score;
        setTimeout(function () {
            gameOver(moves, score);
        },800);
    }

这是我的配对游戏项目的链接：

https://codepen.io/sofianayak55/pen/wEBvvJ

Answer 1

您正在加载 jQuery 之前的 Bootstrap 库...

 <!--Add jQuery-->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js'></script>
 <script src="js/app.js"></script>

颠倒这两个的顺序。 ;)

这在console 中产生了以下错误：

未捕获的类型错误：无法读取未定义的属性“fn”
在 util.js:68
在 util.js:10
在 bootstrap.min.js:6
在 bootstrap.min.js:6

我在 15 步 34 秒内完成了游戏。 ;)

---

编辑
JS 中的第 118 行是问题所在。你使用了$('#myModal').toggle()（在游戏结束时打开它）。

我将 id 替换为 $('#myModal').modal("show");。 data-dismiss 需要使用 modal() 方法显示模式。 .toggle() 是显示/隐藏元素的 jQuery 方法。因此，由于 Bootstrap 不知道显示模式，dismiss 不起作用。

这是你的CodePen updated。

我评论了您服务器上的几个本地资源...但在 CodePen 中是 404...所以请注意如果您从中复制/粘贴。