jquery彈出取消事件

我有一個（知名度：隱藏）與下拉菜單和jQuery日期選擇器上的div。該div是用戶在輸入字段上單擊時顯示的彈出窗口。jquery彈出取消事件

當用戶點擊頁面上的其他地方時，彈出窗口需要消失。隱藏彈出的代碼是像這樣：

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（）似乎打破代碼，如果你把在類似的高度： '500像素'，寬度： '500像素'它適用於該地區！

使用jQuery（窗口）.height（）它有點作用，但現在我看到有點關閉。窗口高度似乎沒有完全計算，顯示器是1024高，雖然腳本說937，即使我全屏使用谷歌瀏覽器

編輯：我使用screen.height和screen.width，而不是總是給出最大的區域:)

所以我現在有這個工作，但有一個缺陷：當點擊下拉菜單彈出窗口淡入淡出。我試過使用

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

但是這根本不起作用。

來源

2010-01-19 Cornelis

爲什麼你需要重新發明輪子？！ ......這裏有很多插件，這些插件都很好用！ sry pal – 2010-01-20 08:33:34

使用插件幾乎總是會帶來很多我不會使用的代碼。如果可以通過使用標準庫來完成，我寧願這樣做。 – Cornelis 2010-01-20 08:40:38

對於燈箱，通常要做的事情（或者至少是我自己完成和實現的事情）是在覆蓋整個頁面的彈出框下面追加一個DIV，然後將一個事件附加到關閉彈出。你需要適當調整，但它的基本思想。

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

來源

2010-01-19 14:05:09 prodigitalson

您能否提供示例代碼？如果我追加一個DIV，它看起來只會在彈出框下面顯示，或者我必須指定高度/寬度（如果這樣會有幫助的話）？ – Cornelis 2010-01-19 14:10:27

查看編輯的基本思路 - id建議查看一個jquery-ui對話框或者其他類似的東西，因爲它使用了類似的方法，但是使用更好的代碼毫無疑問:-) – prodigitalson 2010-01-19 14:36:36

您提供的代碼似乎沒有編譯css屬性:(已經刪除了額外的'}' – Cornelis 2010-01-19 14:51:24

jquery彈出取消事件

回答

相關問題