closing iframe on esc key or clicking anywhere else - php

Question

i want to close the iframe box as soon as i hit esc or i click outside the iframe area at the moment i have to click back on hideshow icon to hide the iframe again is there a method that i can use to close the iframe with esc or clicking outside the iframe area
index.php
<div id="msg_pic">
<a class="msg_pic_link" id="hideshow"><span><img src="emptymsg.png" width="21px" height="21px"/></span></a>
</div>
<div id="message" >
<iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"></iframe>
</div>
hide-show.js
$('#hideshow').on("click", function() {
var text = $(this).val();
$("#message").toggle();
});
mycss.css
#message
{
display:none;
position: absolute;
z-index: 1;
}
the question how can i press esc key or click outside the msg_pic_link div to close message

Answer 1

Try using $(window).on("click keydown") , .is()
$('#hideshow').on("click", function() {
var text = $(this).val();
$("#message").toggle();
$(window).focus()
});
$(window).on("click keydown", function(e) {
//e.preventDefault()
if (e.keyCode === 27 || !$(e.target).is(function() {
return $("#message, #hideshow")
})) {
$("#message").hide()
}
}).focus()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="msg_pic">
<a class="msg_pic_link" id="hideshow"><span><img src="emptymsg.png" width="21px" height="21px"/></span></a>
</div>
<div id="message">
<iframe id="iframe" style=" border-color:#080000; background-color: white ;" src="conversation.php" width="300" height="300"></iframe>
</div>
jsfiddle http://jsfiddle.net/pb47m0om/2/