Hello,

I have code that I am using to create a modal window. The way I was taught the code used a button to open the modal window. How would I modify the code to have it open when clicking a link? Here is the code:

PHP Code:
<body>
    <!-- Script 9.8 - modal.html -->
    <div><p>Some Text</p></div>
    <input type="button" value="Show Window" id="openModal">
    <div id="modal">
        <div id="modalMask"></div>
        <div id="modalContent"><p>This is modal content.</p> <input type="button" id="closeModal" value="Close"></div>
    </div>
    <div><p>Some Text</p></div>
    <script src="js/modal.js"></script>
</body> 

and here is the javascript:

PHP Code:
// Function called to open the window:
function openModal() {
    'use strict';

    // Add a click handler to the close modal button:
    document.getElementById('closeModal').onclick = closeModal;
    
    // Make the modal DIV visible:
    document.getElementById('modal').style.display = 'inline-block';

    // Remove the click handler on the open modal button:
    document.getElementById('openModal').onclick = null;
    
} // End of openModal() function.

// Function called to close the window:
function closeModal() {
    'use strict';

    // Add a click handler to the open modal button:
    document.getElementById('openModal').onclick = openModal;

    // Make the modal DIV invisible:
    document.getElementById('modal').style.display = 'none';

    // Remove the click handler on the close modal button:
    document.getElementById('closeModal').onclick = null;
    
} // End of closeModal() function.

// Establish functionality on window load:
window.onload = function() {
    'use strict';

    // Add a click handler to the open modal button:
    document.getElementById('openModal').onclick = openModal;

}; 
Here is the CSS:
PHP Code:
#modal {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
}

#modalMask {
    position: absolute;
    left: 0px;
    top: 0px;
    width:100%;
    height:100%;
    background-color: #eee;
    z-index: 1000;
    opacity: 0.9;
    filter:alpha(opacity=90);
    -moz-opacity: 0.9;
}

#modalContent {
    position: relative;
    width:300px;
    margin: 15px auto;
    padding:15px;
    background-color: #fff;
    border:1px solid #000;
    text-align:center;
    z-index: 9999;
}