[英]Bootstrap 4 Modal Pop up window can not able to close
I did a project on matching game. 我做了一个关于配对游戏的项目。 Where after all cards match and game finish, a congratulation modal pop up. 在所有纸牌都匹配且游戏结束后,会弹出一个祝贺模式。 But I could not able to know why it does not close, after clicking the play again button. 但是单击“再次播放”按钮后,我不知道为什么它没有关闭。
Here is the index.html for the modal window 这是模式窗口的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">×</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-->
And the javascript for 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);
}
Here is the link for my matching game project: 这是我的配对游戏项目的链接:
https://codepen.io/sofianayak55/pen/wEBvvJ https://codepen.io/sofianayak55/pen/wEBvvJ
You are loading the Bootstrap library before jQuery... 您正在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>
Reverse the order of those 2. ;) 颠倒那些2的顺序。
This created the below error in console : 这在控制台中创建了以下错误:
Uncaught TypeError: Cannot read property 'fn' of undefined 未捕获的TypeError:无法读取未定义的属性'fn'
at util.js:68 在util.js:68
at util.js:10 在util.js:10
at bootstrap.min.js:6 在bootstrap.min.js:6
at bootstrap.min.js:6 在bootstrap.min.js:6
I had the game done in 15 moves, 34 seconds. 我完成了15步34秒的比赛。 ;) ;)
$('#myModal').toggle()
(at game over, to open it).
您使用$('#myModal').toggle()
(在游戏结束时将其打开)。
I replaced id with $('#myModal').modal("show");
我用$('#myModal').modal("show");
替换了id . 。 data-dismiss
needs the modal to be shown using the modal()
method. data-dismiss
需要使用modal()
方法显示modal()
。 .toggle()
is the jQuery method to display/hide an element. .toggle()
是显示/隐藏元素的jQuery方法。 So since Bootstrap doesn't know the modal is shown, the dismiss
doesn't work. 因此,由于Bootstrap不知道显示了模态,因此dismiss
不起作用。
Here is your CodePen updated . 这是您的CodePen更新 。
I commented a couple ressources that are local on your server... but are 404 in CodePen... So be aware if you copy/paste from it. 我评论了几个在服务器上本地的资源...但是在CodePen中是404 ...所以请注意是否从中复制/粘贴。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.