如何识别何时在弹出窗口外单击？ [英] How to identify when a click is made outside the popup window?

问题描述

我有一个弹出窗口，点击里面消失，但我的目的是让它消失在点击外面。

目前弹出窗口工作正常，但它当我在窗口内点击时消失。当我在窗口外面点击时，它仍然存在。

代码为：

 <$ c我该如何使它适用于oppersite？ （）函数取消选择（e）{
 $（'。pop'）。slideFadeToggle（function（）{
 e.removeClass（'selected'）; 
}）; $（$'
} 
 
 $（function（）{
 $（'。invite_room_btn'）。on（'click'，function（）{
 if ）.hasClass（'selected'））{
 deselect（$（this））; 
} else {
 $（this）.addClass（'selected'）; 
 $ （'.pop'）。slideFadeToggle（）; 
} 
 return false; 
}）; 
 $ b $（'。close'）。on（'click '，function（）{
 deselect（$（'。invite_room_btn'））; 
 return false; 
}）; 
}）; 
 
 $ .fn.slideFadeToggle = function（easing，callback）{
 return this.animate（{opacity：'toggle'，height：'toggle'}，'fast'，easing，回电话）; 
}; 
  

HTML是：

 < span class =invite_room_btn> 
< div class =messagepop pop> 
< / div> 
< / span> 
  

谢谢！

解决方案

您的问题可以解释为如何识别点击是在弹出窗口外进行的吗？

建议此处 ，你可以通过差异来工作，检查点击发生在除了弹出窗口之外的任何地方（以及最终的一些其他元素）。

这可以如下实现：

HTML代码可能类似于：

 < div id =popup class =popup> 
内容
< div> DIV内部< / div> 
< / div> 
< button id =open>打开< /按钮> 
  

而javascript是：

<$ p $ $（$＃$ c $> $（document）.ready（function（）{
$（'＃popup'）。hide（）
}）; （'click'，function（）{
$（'＃popup'）。show（500）
}）;

$（'＃open'）。
$ b $（document）.mouseup（function（e）{
var popup = $（＃popup）;
if（！$（'＃open'）。是（e.target）&！popup.is（e.target）&& popup.has（e.target）.length == 0）{
popup.hide（500）;
}
}）;

一些CSS样式的完整示例： http://jsfiddle.net/sLdmxda8/2/

I have a popup window which disappears on click inside, but my purpose is to make it disappear on click outside.

At the moment the popup works fine but it disappears whenever I click inside the window. When I click outside the window, it stays. How do I make it work the oppersite way around?

Code as:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('.invite_room_btn').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('.invite_room_btn'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

And HTML is:

<span class="invite_room_btn">
            <div class="messagepop pop">
            </div>
</span>

Thanks!

解决方案

Your question can be interpreted as "how to identify when the click is made outside the popup window"?

as suggested here, you can work by difference, checking that the click occurred anywhere but the popup window (and eventually some other elements)

This can be achieved as follows:

the HTML code may be something like:

<div id="popup" class="popup"> 
    Content
    <div>DIV inside</div>
</div>
<button id="open">Open</button>

while the javascript is:

 $(document).ready(function () {
     $('#popup').hide()
 });

 $('#open').on('click', function () {
     $('#popup').show(500)
 });

 $(document).mouseup(function (e) {
     var popup = $("#popup");
     if (!$('#open').is(e.target) && !popup.is(e.target) && popup.has(e.target).length == 0) {
         popup.hide(500);
     }
 });

Full example with some CSS-styling: http://jsfiddle.net/sLdmxda8/2/

这篇关于如何识别何时在弹出窗口外单击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！