Trying to get a modal to show up using html & javascript, but nothing shows up after clicking

by whxtn3y   Last Updated May 16, 2019 00:26 AM

So I followed a tutorial on how to do a simple modal and I am trying to get it to appear on my page after clicking on, but nothing happens.

The modal is styled in the css sheet as display:none.


<script src="modaltestjs.js"> </script>


    <a href="#" id="button" class="button"> Click me </a>

        <div class="bg-modal"> 

            <div class="modal-content"> 

                <h4> Promotion/voucher code</h4> 
                <div class="close"> + </div>

            <form action="" method="POST"> 

                  <span> Promotion/voucher code: <input type="text" placeholder="Code"> </span>

               <button class="mbutton"> <a href=""> Ok </a> </button>
               <button class="mbutton"> <a href=""> Cancel </a> </button>




/*eslint-env browser*/

document.getElementById("button").addEventListener("click", function () {
    "use strict";
    document.querySelector(".bg-modal").style.display = "flex";



/*modal styling*/
.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute; 
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;


    width: 600px;
    height: 200px;
    background-color: white;
    border-radius: 4px;
    text-align: center;
    position: relative;



    background-color: lightgreen


I expected the modal box to appear but nothing happens once I click on "click me".

Related Questions

Updated October 13, 2018 09:26 AM

Updated December 11, 2017 00:26 AM

Updated June 28, 2018 22:26 PM

Updated January 30, 2017 14:11 PM