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.

html

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

</head>


    <body>
        <!--modal-->
        <div>
    <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>


                </form>
            </div>
        </div>
       </div>


</body>

javascript

/*eslint-env browser*/

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

});

css

/*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;

}

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

}


input:focus{

    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