关闭esc键上的iframe或单击其他任何位置 - closing iframe on esc key or clicking anywhere else

closing iframe on esc key or clicking anywhere else

我想在点击esc时立即关闭iframe框，或者现在我在iframe区域外点击。我必须点击回hideshow图标以再次隐藏iframe。有没有一种方法可以用esc或在ifame区域外点击来关闭iframe

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>

隐藏显示.js

$('#hideshow').on("click", function() {
    var text = $(this).val();
    $("#message").toggle();
});

mycss.css

#message
{
display:none;
position: absolute; 
z-index: 1; 
}

问题是我如何按esc键或在msg_pic_linkdiv之外单击以关闭message

尝试使用$(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>

jsfiddlehttp://jsfiddle.net/pb47m0om/2/