在 esc 键上关闭 iframe 或单击其他任何位置

Question

我想在点击esc 后立即关闭 iframe 框，或者我在 iframe 区域之外单击，此时我必须返回hideshow 图标以再次隐藏 iframe 是否有我可以的方法使用esc关闭iframe或点击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>

hide-show.js

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

});

mycss.css

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

问题我如何按 esc 键或在msg_pic_link div 外部单击以关闭message

Answer 1

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