Javascript Onclick and Onkeypress

Question

I have a problem with my script I do not come on. When I click "Link 5" window appears. And then I have only one chance to close this window, to press the "close" button. I want another function, namely the onkeypress function. When I press Esc then the window should also close. I hope you can help me.

<li onClick="return pop('pop')" id="stream">Link 5</li>
        <div id="pop" class="parentDisable" onselectstart="return false" onselectstart="return false">
            <table border="1" id="popup">
                <tr>
                    <td>
                        <a href="" onClick="return hide('pop')" style="float: right; margin: 4px;">
                            <img src="http://www.imgbox.de/users/Metraax/close.png" />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h2>Fenster ge&ouml;ffnet</h2>
                    </td>
                </tr>
                <tr>
                    <td>height: auto;</td>
                </tr>
            </table>
        </div>
        <script type="text/javascript">
        function pop(div)
        {
        document.getElementById(div).style.display='block';
        return false
        }
        function hide(div)
        {
                           if (e.keycode == '27')
                    {document.getElementById(div).style.display='none';}
        document.getElementById(div).style.display='none';
        document.getElementById(div).style.display='none';
        return false
        }
        </script>

    <style>

    .parentDisable {
        z-index:999;
        width:100%;
        height:100%;
        display:none;
        position: absolute;
        top:0;
        left:0;
        background-color: rgba(204, 204, 204, 0.4);
        color: #aaa;
        filter: alpha(opacity=50);
    }
    #popup {
        width: 44.48%;
        position: absolute;
        top: 200px;
        left: 27.76%;
        color: #000;
        background-color: #C4C4C4;
        border-radius: 5px;
        box-shadow: 0px 0px 20px gray;
    }
    #popup tr td h2 {
        float: left;
        font-size: 20px;
    }
    #popup tr {
        cursor: default;
    }
    </style>

Answer 1

Something like this:

function pop(div) {
    var d = document.getElementById(div);
    d.style.display = 'block';

    if (document.addEventListener) {
        document.addEventListener ("keyup", function(e) {
            onEsc(e, d);
        }, false);
    }else{
        if (document.attachEvent)
            button.attachEvent ("keyup", function(e) {
                onEsc(e, d);
            });
    }
    return false
}

function hide(div) {
    document.getElementById(div).style.display = 'none';
    return false
}

function onEsc(event, elem) {
    if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
        event.which = event.charCode != null ? event.charCode : event.keyCode;
    }
    if (event.which === 27) {
        elem.style.display = 'none';
        document.removeEventListener("keyup");
    }
}

FIDDLE

Answer 2

You can use this code with jQuery:

$(document).keyup(function(e) {    
  if (e.keyCode == 27) { <YOUR CODE HERE> }   // esc
});