Hi your code is ok but you missed one thing
<input type="button" id="modal-btn" value="button">
here is the image that content also showing
modal with content
Solution 1 :
Solution 2 :
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function show_modal(){
document.getElementById("modal").style.display = "block";
}
function close_modal(){
document.getElementById("modal").style.display = "none";
}
</script>
<style>
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background-color: white;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
</style>
</head>
<body>
<button class="modal-btn" onclick="show_modal()">Show Model</button>
<!-- The Modal -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span onclick="close_modal()" class="close-btn">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>Solution 3 :
Your code works fine. Just add a button with id modal-btn to toggle the visibility as per your javascript code. Run the snippet below to see working example.
let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function() {
modal.style.display = "block"
}
closeBtn.onclick = function() {
modal.style.display = "none"
}
window.onclick = function(e) {
if (e.target == modal) {
modal.style.display = "none"
}
}.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background-color: white;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
}
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}<button id="modal-btn">Open Modal</button>
<div class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close-btn">×</span>
<p>Some text in the Modal..</p>
</div>
</div>Problem :
Content doesn’t show in the modal when button was clicked. It only show the modal and the “x” icon but not the modal content.
Html CODE:
<!-- The Modal -->
<div class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close-btn">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS CODE:
(To style the modal)
.modal {
display: none;
position: fixed;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
position: relative;
background-color: white;
padding: 20px;
margin: auto;
width: 75%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
.close-btn {
float: right;
color: lightgray;
font-size: 24px;
font-weight: bold;
}
.close-btn:hover {
color: darkgray;
}
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
JavaScript CODE:
(To show the modal and for the “x” icon)
let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
modal.style.display = "block"
}
closeBtn.onclick = function(){
modal.style.display = "none"
}
window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}
Well I don’t know how to fix cause everything is fine, dunno what’s the cause of it, oh and the modal-content don’t even have a display: none; property. Thx in advance.
Comments
Comment posted by Johnsiras
What’s the changes tho?
Comment posted by Yagnik Sangani
You need to change the javascript code. When we click on the show model button the show_modal function will be called. And same like on close modal, the function close_modal will be closed. You need to add id=”modal” in div with class=”modal” and onclick attributes on particular buttons.
Comment posted by Johnsiras
I already have still doesn’t show the content.
Comment posted by Vineet Desai
That’s weird. Are you able to see the content when you run the above snippet in your browser? Which browser are you using?
Comment posted by Johnsiras
No I can’t see the content when I run that code and I use Google chrome
Comment posted by Vineet Desai
It works for me on chrome. Can you check if Javascript execution is allowed in your browser? Can you try clearing the browser cache, restarting the browser and try again? Or may be on a different browser like Edge or Firefox?
Comment posted by Johnsiras
Ok so uhm I tried the modal in my other website but it works that’s weird cause my new website doesn’t show modal maybe it’s blocking something or just the content? How do I know? And JavaScript execution is allowed in my browser.