我从Codepen复制了一个模板。该代码过时，并具有一些旧的CDN链接。这意味着我必须为那些链接找到更新的版本。我非常接近使该应用程序完全正常运行，因此我需要在打开后关闭该模式。我相信它有一些引导程序。下面提供了链接和模式的代码。
<head>
<title>Refugee Stories</title>
<link rel = "stylesheet" href = "index.css">
<meta name = "viewport" content="width = device-width,initial-scale=1.0">
<meta charset="utf-8">
<!-- jQuery Version 1.11.0 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<!-- <link rel="stylesheet" href="index.css"> -->
<!-- Script -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
</head>
...
<div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Refugee Stories</h2>
<p class="item-intro text-muted">Html/Css/JavaScript</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/M4yl6ZXC3VY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p>Refugee Stories is an application where you can read refugee stories once logged in. As a admin you can review stories and either approve for the story to make it on the site or decline. As an user you can submit stories for review. Both roles may view and read stories. </p>
<a href="https://refugeestoriesbw.netlify.app/"><button type="button" class="btn btn-primary"><i class="fa fa-times"></i> See Project</button>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
UPDATE：
这里是工作示例。正如我在评论中提到的那样，您已经使用过jQuery两次，但未按照文档实施MOdal Stutrue，这就是为什么无法按预期工作的原因