Why won't this modal open with this code. It still redirects, but the modal doesnt pop up

Question

I updated the JS to show everything. The one answer below doesn't seem to work with all my code.

I am using this JS

        // Get the modal
    var modal = document.getElementById('myModal');
    
    // Get the button that opens the modal
    var btn = document.getElementById("myBtn");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on the button, open the modal
    btn = document.getElementById('myBtn');
    modal = document.getElementById('myModal');
    btn.onclick = function() {
    modal.style.display = "block";
    (function(){
      var countdown = 5;
    
      setInterval(function() {
        countdown--;
        if (countdown >= 0) {
          span = document.getElementById("countdown");
          span.innerHTML = countdown;
        }
        // Display 'counter' wherever you want to display it.
        if (countdown === 0) {
        //    alert('this is where it happens');
            window.location.href= 'https://smb.cyberpolicy.com';
            clearInterval(countdown);
        }
    
      }, 1000);
    
    })();
    
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

        <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
    
    <!-- Modal content -->
     <div id="boxes">
         <div class="modal-content">
    
      <div id="dialog" class="window">
                    <span class="close">&times;</span>
        <p style="top-modal-text">In <span id="countdown">5</span> seconds you'll be leaving Hiscox to continue a quote with a trusted partner.</p>
                    <a href="http://smb.cyberpolicy.com/" class="no-external-link"><img alt="Cyber Security Get A Quote" src="https://www.hiscox.com/sites/default/files/images/wysiwyg/getaquote.jpg" style="margin-top: 10px" class="align-left"></a><br>
              <a src="https://www.hiscox.com"><p>Click here to return to Hiscox.com</p></a>
        </div>
      </div>
      <!-- <div id="mask"></div> -->
    </div></div>
    
    </div>

I think there is something wrong with the JS but I am obviously missing it.

Answer 1

Intro

You had a three errors I fixed.

The first 2 were that you never assigned your variables for modal and button. You need to do this using document.geteElementById.

One more error was never hiding the modal in the first place.

online fiddle: https://jsfiddle.net/euo4byj2/31/

Specific Fixes

You were missing variable assignments:

btn = document.getElementById('myBtn');
modal = document.getElementById('myModal');

You were also missing style code to hide the modal in the first place:

<div id="myModal" class="modal" style="display:none">

Working Code

  <!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal" style="display:none">

<!-- Modal content -->
 <div id="boxes">
     <div class="modal-content">

    <div id="dialog" class="window">
                <span class="close">&times;</span>
        <p style="top-modal-text">In <span id="countdown">5</span> seconds you'll be leaving Hiscox to continue a quote with a trusted partner.</p>
                <a href="http://smb.cyberpolicy.com/" class="no-external-link"><img alt="Cyber Security Get A Quote" src="https://www.hiscox.com/sites/default/files/images/wysiwyg/getaquote.jpg" style="margin-top: 10px" class="align-left"></a><br>
          <a src="https://www.hiscox.com"><p>Click here to return to Hiscox.com</p></a>
        </div>
    </div>
    <!-- <div id="mask"></div> -->
</div></div>

</div>



<script>
btn = document.getElementById('myBtn');
modal = document.getElementById('myModal');
btn.onclick = function() {
modal.style.display = "block";
(function(){
  var countdown = 5;

  setInterval(function() {
    countdown--;
    if (countdown >= 0) {
      span = document.getElementById("countdown");
      span.innerHTML = countdown;
    }
    // Display 'counter' wherever you want to display it.
    if (countdown === 0) {
    //    alert('this is where it happens');
        window.location.href= 'https://smb.cyberpolicy.com';
        clearInterval(countdown);
    }

  }, 1000);

})();

}


</script>