Reputation: 959
This is my first time working with modals and I'm having trouble getting my modal to open on a link click. I'm receiving no errors in the console so I'm having a hard time troubleshooting this.
HTML:
<!--Navbar-->
<nav class="navbar">
<div class="logo">
<h4>Earthquake Feed</h4>
</div>
<ul class="nav-links">
<li><a href="#simpleModal" data-target="simpleModal" data-toggle ="simpleModal" id="aboutModal">About</a></li>
<li><a href="#">Legend</a></li>
</ul>
</nav>
<!--About Modal-->
<div id="simpleModal" class="modal">
<div class="modal-content">
<span class="closeBtn">×</span>
<p>Hello....I am a modal</p>
</div>
</div>
Javascript:
// Get about modal element
var modal = document.getElementById('simpleModal');
// get open about modal link
var aboutModal = document.getElementById('aboutModal');
// Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];
// listen for open/close click
aboutModal.addEventListener('click', openModal);
aboutModal.addEventListener('click', closeModal);
// opens and closes modal
function openModal(){
modal.style.display = 'block';
}
function closeModal(){
modal.style.display = 'none';
}
Any suggestions?
Upvotes: 0
Views: 61
Reputation: 513
You are adding both the open and close click
events on aboutModal
, due to which the function for closing the modal overdoes the work done by function for opening modal.
You need to add the closeModal
event function on closeBtn
.
closeBtn.addEventListener('click', closeModal);
Upvotes: 1
Reputation: 2888
You need to add openModal()
to aboutModal
and your closeModal
on click handler to closeBtn
. By adding both of these to aboutModal
both of these get invoked. Clicking aboutModal
executes openModal()
first then immediately executes closeModal
right after. See the snippet.
// Get about modal element
var modal = document.getElementById('simpleModal');
// get open about modal link
var aboutModal = document.getElementById('aboutModal');
// Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];
// listen for open/close click
aboutModal.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
// opens and closes modal
function openModal() {
modal.style.display = 'block';
}
function closeModal() {
modal.style.display = 'none';
}
document.addEventListener('DOMContentLoaded', () => {
modal.style.display = 'none'
})
<nav class="navbar">
<div class="logo">
<h4>Earthquake Feed</h4>
</div>
<ul class="nav-links">
<li><a href="#simpleModal" data-target="simpleModal" data-toggle="simpleModal" id="aboutModal">About</a></li>
<li><a href="#">Legend</a></li>
</ul>
</nav>
<!--About Modal-->
<div id="simpleModal" class="modal">
<div class="modal-content">
<span class="closeBtn">×</span>
<p>Hello....I am a modal</p>
</div>
</div>
Upvotes: 1
Reputation: 11
if I understood correctly the problem (looking at your code) is that you created 2 click listeners, one with an open function and another with a close function.
I'll modify your code chaging the functions to a toggle:
// Get about modal element
var modal = document.getElementById('simpleModal');
// get open about modal link
var aboutModal = document.getElementById('aboutModal');
// Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];
// listen for toggle Modal
aboutModal.addEventListener('click', toggleModal);
// opens and closes modal
function toggleModal(){
modal.style.display = (modal.style.display = 'block')? 'none' : 'block';
}
Upvotes: 0
Reputation: 8589
You bind both the open and close function to the same button. So when you click it, the browser will open and close the modal at the same time, so it looks like nothing happened. Just bind it to the correct button.
Also, add a default state of closed to the modal.
// Get about modal element
var modal = document.getElementById('simpleModal');
// get open about modal link
var aboutModal = document.getElementById('aboutModal');
// Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];
// listen for open/close click
aboutModal.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
// opens and closes modal
function openModal(){
modal.style.display = 'block';
}
function closeModal(){
modal.style.display = 'none';
}
#simpleModal {
display: none;
}
<nav class="navbar">
<div class="logo">
<h4>Earthquake Feed</h4>
</div>
<ul class="nav-links">
<li>
<a href="#simpleModal" data-target="simpleModal" data-toggle ="simpleModal" id="aboutModal">About</a>
</li>
<li>
<a href="#">Legend</a>
</li>
</ul>
</nav>
<!--About Modal-->
<div id="simpleModal" class="modal">
<div class="modal-content">
<span class="closeBtn">×</span>
<p>Hello....I am a modal</p>
</div>
</div>
Upvotes: 1
Reputation: 529
Your aboutModal has two different callbacks - openModal() and closeModal() for the same click event. When you click aboutModal, openModal() displays your modal but after that, closeModal() hides it as both of them execute.
Upvotes: 1