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>

隐藏-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/

在esc键上关闭iframe或点击其他任何地方

1 个答案: