CODEWITHSUNDEEP
javascripthtmlmodal-dialog
prime90
prime90

Reputation: 959

Modal not opening with link click

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">&times;</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

Answers (5)

adzo261
adzo261

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

Matt Croak
Matt Croak

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">&times;</span>
    <p>Hello....I am a modal</p>
  </div>
</div>

Upvotes: 1

A. Avellaneda
A. Avellaneda

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

Shilly
Shilly

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">&times;</span>
    <p>Hello....I am a modal</p>
  </div>
</div>

Upvotes: 1

Stack
Stack

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

Related Questions