Popup tutorial not working

I followed a tutorial from https://www.youtube.com/watch?v=snhpoxtLugU to add the popup feature to my portfolio. However when I finished following the video and I click the link “read more” , the popup does not show up. Instead, the page refreshes to the header and when i scroll down, the image and text is blurred(thats supposed to happen). What I want is for the modal to not only show up but also appear in the same “Activities section”.

Html:

<div class="container">

  <div class="section-heading">

    <h1>Activities</h1>

    <h6>Some events I've taken part in</h6>

  </div>

  <div class="activity-list" id="blur">

    <div class="activity-item" >

      <div class="img-container">

          <img src="{% static 'portfolio/avatar.png' %}" alt="">

      </div>

      <h1>Title</h1>

      <a href="#" class="cta" onclick='toggle()'> Read more </a>

      <div class="popup">

        <h2> Some random title</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non ultricies libero.

           Donec at feugiat tellus. Suspendisse eu dictum urna.

           Curabitur ipsum dolor, volutpat id est vel, ultricies consectetur nibh. 

           Donec molestie luctus dolor et accumsan. 

        </p>

        <a href="#" class="cta" onclick="toggle()">Close</a>

      </div>

    </div>

  </div>

</div>

Css:

.activity-list#blur.active{

filter: blur(20px);

pointer-events: none;

user-select: none;

}

.popup{

position: fixed;

top: 40%;

left:50%;

transform: translate(-50%,-50%);

width: 600px;

padding: 50px;

box-shadow: 0 5px 30px rgba(0,0,0,.30);

background: #fff;

visibility: hidden;

opacity:0;

transition: 0.5s;

}

.popup.active{

top: 50%;

visibility: visible;

opacity:1;

transition: 0.5s;

}

Javascript:

function toggle(){

var blur = document.getElementById('blur');

blur.classList.toggle('active');

var popup = document.getElementsByClassName('popup');

popup.classList.toggle('active');

}

Hey there,

in order to help you, please put your code into codepen and show us the link, so it’ll be easier for us to help you.

Thank you for the suggestion. I’ve replicated the part where the problem is below but if anything more is needed , I will add it.

So when I click the read more button the modal should appear on top of it and the background will be blurred.