jquery弹出取消事件答案

【问题标题】：jquery popup cancel eventjquery弹出取消事件
【发布时间】：2010-01-19 12:43:27
【问题描述】：

我有一个 (visibility:hidden) div，上面有一个下拉菜单和一个 jQuery 日期选择器。这个 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', width: '500px' 的内容，它适用于该区域！

使用 jQuery(window).height() 有点效果，但现在我发现这有点不对劲。窗口高度似乎没有完全计算出来，显示器是 1024 高，虽然脚本说 937，即使我全屏使用谷歌浏览器

编辑：我使用的是 screen.height 和 screen.width，这总是给出最大面积:)

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

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

但这根本不起作用。

【问题讨论】：

为什么要重新发明轮子？！ ... 那里有很多这样的插件，它们都运行得很好！对不起，朋友
使用插件几乎总是会带来很多我不会使用的代码。如果可以使用标准库通过一些努力来完成，我更喜欢这样做。

标签： jquery

【解决方案1】：

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

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); 
});

【讨论】：

能否提供示例代码？如果我附加一个 DIV，它似乎只能在弹出窗口下方使用，还是我必须指定高度/宽度（如果这有帮助的话）？
查看基本思想的编辑 - id 建议查看 jquery-ui 对话框或类似性质的东西，因为它使用类似的方法，但毫无疑问具有更好的代码 :-)
您提供的代码似乎没有编译css属性:(已经删除了额外的'}'
没有额外的 }... 我错过了 css 中的 {。应该是.css({/* props/vals */})
好吧，那是我的错，但是它仍然不起作用，我似乎找不到前置的 DIV 元素（在 Chrome 检查元素中），如果我输入背景颜色也看不到它并将 z-index 设置为更高的值