jquery弹出取消事件
jquery弹出取消事件
提问于 2010-01-19 20:43:28
我有一个带有下拉菜单和jQuery日期选择器的(可见性:隐藏) div。此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
现在的问题是，当用户点击datepicker上方的下拉菜单或datepicker本身的下拉菜单(月/年)时，弹出菜单会消失，例如，当用户使用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(窗口).height()，它在某种程度上是有效的，但现在我发现这有点不对劲。窗口高度似乎没有完全计算出来，显示器是1024高，尽管脚本说是937，即使我在全屏使用Google Chrome
编辑:我使用的是screen.height和screen.width，这总是给出最大的区域:)
所以我现在可以正常工作了，但有一个缺陷:当点击弹出菜单中的下拉菜单时，弹出菜单也会淡出。我试着用
jQuery('select').click(function(event){
event.stopPropagation();
});但这根本不起作用。
回答 1
Stack Overflow用户
回答已采纳
发布于 2010-01-19 22:05:09
通常对灯箱所做的(或者至少是我之前看到的)是在覆盖整个页面的弹出式窗口下面附加一个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);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2093496
复制相关文章
相似问题
腾讯云开发者
