I am trying to create an info button that users can click on to learn more about my site through a popup modual. When testing it on the live server, clicking the button makes the background color darker, but the popup modual itself is nowhere to be seen. Please let me know what I have overlooked in my code that might be causing this error. Thank you!
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/[email protected]/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 id="info-button">
<button >?</button>
</div>
<div id="modal_container">
<div >
<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/[email protected]/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');
});
CodePudding user response：
The bootstrap lib has already a class .modal so you have to rename your .modal class to something else and it should works. I've tested.
CodePudding user response：
Your code was interfering with the Bootstap CSS Lib. which already has a default styling behavior for modals etc.
Below, I was able to fix your issue using the bootstrap custom modal system and it works perfectly.
$("#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/[email protected]/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 id="info-button">
<button data-toggle="modal" data-target="#modal_container">?</button>
</div>
<!-- Modal -->
<div id="modal_container" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div role="document">
<div >
<div >
<h5 id="exampleModalCenterTitle">Modal Test</h5>
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div >
<p>Test text!</p>
</div>
<div >
<button type="button" data-dismiss="modal">Close
Me</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl"
crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="index.js" defer></script>
</body>