Question

我有一个（visibility：hidden）div，上面有一个Drop Down菜单和一个jQuery datepicker。此div是一个弹出窗口，在用户单击输入字段时显示。

当用户点击页面上的任何其他位置时，弹出窗口需要消失。隐藏弹出窗口的代码如下：

jQuery('.datepicker-popup').live("focusout", function() {
    var id = jQuery(this).attr('id'); 
    id = id.substring(17); // datepicker-popup-#  
    jQuery('#datepicker-popup-'+id).fadeTo(500, 0.0, function() {
        jQuery('#datepicker-popup-'+id).css('visibility', 'hidden');
    });
});

使用jQuery 1.4

现在的问题是，当用户点击日期选择器上方的下拉菜单或来自日期选择器本身（月/年）的下拉菜单时，弹出窗口会消失，例如当用户在div中使用（某些）元素时，代码正在被执行，这显然需要以某种方式防止。

我该如何正确地做到这一点？

编辑：

<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-1.4.min.js"></script>

  <script type="text/javascript">
  jQuery(document).ready(function(){ 
    jQuery('.datePickerTriggerElement').click(function(){
      var picker = jQuery('.datepicker-popup');
      jQuery('<div></div>').css({
        height: body.height(), 
        width: body.width(), 
        position: 'absolute',
        'z-index': -1,
        top: picker.offset().top*-1, 
        left: picker.offset().left*-1
      }).click(function(){
         picker.trigger('focusout'); // or the body of your focusout callback
         jQuery(this).hide(); // or remove if you dont wan to reuse.
      }).prependTo(picker); 
      picker.css('visibility', 'visible');
    });
    jQuery('.datepicker-popup').live("focusout", function() {
      jQuery('.datepicker-popup').fadeTo(500, 0.0, function() {
        jQuery('.datepicker-popup').css('visibility', 'hidden');
        jQuery('.datepicker-popup').css('opacity', '1.0');
      });
    }); 
  });  
  </script>
</head>
<body> 
  <p>
    <input type=text class=datePickerTriggerElement />
    <div id="datepicker-popup-0" class="datepicker-popup" style="visibility: hidden">
        Popup text
    </div>
  </p>
</body>
</html>

body.height（）和body.width（）似乎打破了代码，如果你要输入像height这样的东西：'500px'，宽度：'500px'它适用于那个区域！

使用jQuery（window）.height（）它有点工作，但是现在我看到它有点偏。看起来窗口高度没有完全计算，显示器高达1024，尽管脚本说937，即使我全屏使用谷歌浏览器

编辑：我正在使用screen.height和screen.width，这总是给出最大区域：）

所以我现在有这个工作，但有一个缺陷：当点击弹出窗口中的下拉菜单时，弹出窗口也会消失。我尝试使用

jQuery('select').click(function(event){
  event.stopPropagation();
});

但这根本不起作用。

Answer 1

对于灯箱，通常所做的事情（或者至少我之前已经完成并在我自己实现过的事情）是在覆盖整个页面的弹出窗口下面添加一个DIV，然后将click事件附加到那个关闭弹出窗口。你需要适当地调整它，但它是基本的想法。

jQuery('.datePickerTriggerElement').click(function(){
  var picker = jQuery('.datepicker-popup');
  jQuery('<div></div>').css(
    height: body.height(), 
    width: body.width(), 
    position: 'absolute',
    'z-index': -1,
    top: picker.offset().top*-1, 
    left: picker.offset().left*-1
  }).click(function(){
     picker.trigger('focusout'); // or the body of your focusout callback
     $(this).hide(); // or remove if you dont wan to reuse.
  }).prependTo(picker); 
});

jquery弹出取消事件

1 个答案: