모달을 열기 위해 클릭하면 모달이 제대로 표시되고 닫기 버튼을 누르면 마우스가 모달 위에 있는 것으로 표시되지만 클릭하면 아무 일도 일어나지 않고 모달은 계속 열려 있습니다. 이전에 이 문제를 겪거나 해결한 사람이 있나요? 여기서 볼 수 있는 것은 "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">×</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> 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
몇 가지 질문이 있습니다.
주황색 찌르기 버튼을 만드는 방법부터 시작해 보겠습니다.
으아악괜찮아 보이지만...하지만:
으아악확인해 보세요
으아악data target="#modal-container. 하이픈이 누락되었습니다. 대신 이것이다음과 같아야 합니다:
으아악다음에는
으아악showDetailsModal(pokemon)함수에 다음 줄을 포함할 필요가 없습니다.data-target和data-toggle이 부분을 소개해드리겠습니다.마지막으로 CSS가 모달 배경을 모달 위에 배치하는 것 같습니다. 이것을 변경하세요:
으아악 배경의가 1040이므로
z-index를 다른 것으로 변경하세요(예: 1051 또는 이를 제거하고 Bootstrap이 처리하도록 할 수 있음).