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 {
    
displaynone;
    
positionabsolute;
    
left0px;
    
top0px;
    
width:100%;
    
height:100%;
}

#modalMask {
    
positionabsolute;
    
left0px;
    
top0px;
    
width:100%;
    
height:100%;
    
background-color#eee;
    
z-index1000;
    
opacity0.9;
    
filter:alpha(opacity=90);
    -
moz-opacity0.9;
}

#modalContent {
    
positionrelative;
    
width:300px;
    
margin15px auto;
    
padding:15px;
    
background-color#fff;
    
border:1px solid #000;
    
text-align:center;
    
z-index9999;