为什么HTML弹出窗口不显示

我正在尝试创建一个信息按钮，用户可以点击该按钮，通过弹出方式了解更多关于我的网站的信息。当在实时服务器上测试时，点击按钮会使背景颜色变暗，但弹出模式本身却看不到。请让我知道我在代码中忽略了什么，可能导致了这个错误。非常感谢。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- style.css -->
<link rel="stylesheet" href="style.css" />
<!-- Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title>Modal Test</title>
</head>
<body>
<!-- Info Button -->
<div class="container buttons" id="info-button"> 
<button class="btn rounded-btn">?</button>
</div>
<div class="modal-container" id="modal_container">
<div class="modal">
<h1>Modal Test</h1>
<p>Test text!</p>
<button id="close-info">Close me</button>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<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/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- index.js -->
<script src="index.js"></script>
</body>
</html>

style.css

body {
background-color: #363062;
font-family: 'Open Sans', sans-serif;
}
.text {
color: #E9D5DA;
}
.buttons {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #827397;
color: #fff;
margin: 10px;
}
.rounded-btn { 
padding: 1rem 1.5rem;
border-radius: 100%;
}
#info-button { 
justify-content: end;
align-items:flex-end;
}
.modal-container { 
background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position:fixed; 
top: 0; 
left: 0; 
height: 100vh; 
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container.show { 
pointer-events: auto;
opacity: 1;
}
.modal { 
background-color: #fff;
border-radius: 5px;
padding: 30px 50px;
width: 600px;
max-width: 100%;
text-align: center;
}
.modal h1 { 
margin: 0; 
}
.modal p { 
font-size: 14px; 
opacity: 0.7;
}

index.js

const open = document.getElementById('info-button');
const close = document.getElementById('close-info');
const modal_container = document.getElementById('modal_container');
open.addEventListener('click', function() { 
modal_container.classList.add('show');
});
close.addEventListener('click', function() { 
modal_container.classList.remove('show');
});

引导库已经有了一个类.modal，所以你必须将.modal类重命名为其他类，它应该可以工作。我已经测试过了。

您的代码干扰了Bootstap CSS库。其已经具有模式等的默认样式行为

下面，我可以使用引导程序自定义模式系统来解决您的问题，它运行得很好。

$("#myModal").modal()

body {
background-color: #363062;
font-family: 'Open Sans', sans-serif;
}
.text {
color: #E9D5DA;
}
.buttons {
padding-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
background-color: #827397;
color: #fff;
margin: 10px;
}
.rounded-btn {
padding: 1rem 1.5rem;
border-radius: 100%;
}
#info-button {
justify-content: end;
align-items: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<body>
<!-- Info Button -->
<div class="container buttons" id="info-button">
<button class="btn rounded-btn" data-toggle="modal" data-target="#modal_container">?</button>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_container" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal Test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>Test text!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close
Me</button>
</div>
</div>
</div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="index.js" defer></script>
</body>

相关内容

最新更新

热门标签：