Can't get modal to work

Question

I've literally copied and pasted the modal html, css, and javascript fro w3schools into my html and I still can't get this simple modal to show up.

Here is the relevant html.

 <button id="myBtn">Open Modal</button>

     <!-- The Modal -->
     <div id="myModal" class="modal">
         <!-- Modal content -->
         <div class="modal-content">
             <span class="close">&times;</span>
             <p>Some text in the Modal..</p>
         </div>
     </div>

Here is the css.

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

And the 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';
    }
};

This is all copied from w3schools how to section here.

I am using Materialize on the site as well. And they DO have some css classes with the same name, modal, but I'm loading the above styles after I load the material css, and loading the javascript after I load the material javascript.

What happens is when the button is clicked, it will change colors, but the span and the p tag with the text never show. When I click off of the button, the color goes back to the default. So it's like it's working but it's not showing the modal.

I've been working on this for way too long, hence why I've finally just copied and pasted the w3schools code. But. it's still not working. Can someone please fix this before I bang my head on my desk?

Answer 1

Prefix your custom class with something, so that they don't conflict with materializecss. Here I used _ as a prefix to remove the conflict.

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

._modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
._modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
._close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

._close:hover,
._close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
    <div class="section">
   <button id="myBtn" class="btn-large waves-effect waves-light orange">Open Modal</button>

     <!-- The Modal -->
     <div id="_myModal" class="_modal">
         <!-- Modal content -->
         <div class="_modal-content">
             <span class="_close">&times;</span>
             <p>Some text in the Modal..</p>
         </div>
     </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>