0

I am using bracket tool to study about javascript. When I see preview, I can see a button. However, even though I click the button several times and changed codes, nothing happen. Modal does not show up. I know there are so many similar questions about modal. I read some answers but I couldn't solve this problem. Can somebody please give me advice how I can solve this issue?

<!DOCTYPE html > 
<html>
<head>

     <link rel="stylesheet" href="modal.css">
</head>
<body>
   <script type="text/javascript">
    // 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.onclick = function() {
    modal.style.display = "block";
     }

     // 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";
      }
    }
    </script>

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

     <!-- The Modal -->
     <div id="myModal" class="modal">

    <!-- Modal content -->
    <div class="modal-content">
     <span class="close">x</span>
       <p>Some text in the Modal..</p>
    </div>
</div>

2 Answers2

0

Browser is loading a page from top to bottom. Therefore your script runs before html elements are loaded and can not find them.

Solution is to put your <script> tag before closing </body> tag, but after all the page elements.

More about this topic: Where is the best place to put tags in HTML markup?

Community
  • 1
  • 1
aBiscuit
  • 4,414
  • 1
  • 17
  • 28
0

Your Javascript is looking for your button and modal before they have loaded. You either need to use an onload event, document ready with jQuery, or put your Javascript after your modal html. I put a console log in your btn click event so that you'd know it's firing by looking in your dev tools console.

<!DOCTYPE html >
    <html>
        <head>
            <link rel="stylesheet" href="modal.css">
        </head>
        <body>
            <script type="text/javascript">
                function modalFun(){
                    // 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.onclick = function() {
                        console.log(modal);
                        modal.style.display = "block";
                    }

                    // 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";
                        }
                    }
                }

                window.onload=modalFun;
           </script>
           <!-- Trigger/Open The Modal -->
           <button id="myBtn">Open Modal</button>

           <!-- The Modal -->
           <div id="myModal" class="modal">
               <!-- Modal content -->
               <div class="modal-content">
                   <span class="close">x</span>
                   <p>Some text in the Modal..</p>
               </div>
           </div>
     </body>
</html>
JeremyS
  • 427
  • 2
  • 7