I have a popup with drop down menus on it. I've scaled it down and simplified it for test purposes, but it still doesn't work the way I want/it should.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.trigger').click(function(){
var picker = jQuery('.popup');
jQuery('<div></div>').css({
height: screen.height,
width: screen.width,
position: 'absolute',
'z-index': -1,
top: picker.offset().top*-1,
left: picker.offset().left*-1,
border: '1px solid red'
}).click(function(){
picker.trigger('focusout');
jQuery(this).hide();
}).prependTo(picker);
picker.css('visibility', 'visible');
});
jQuery('.popup').live("focusout", function() {
jQuery('.popup').fadeTo(500, 0.0, function() {
jQuery('.popup').css('visibility', 'hidden');
jQuery('.popup').css('opacity', '1.0');
});
});
});
</script>
</head>
<body>
<p>
<input type=text class=trigger />
<div id=popup-div class=popup style="visibility: hidden; border: 1px solid red">
<select>
<option>option1</option>
</select>
<p>Popup text</p>
</div>
</p>
</body>
When you click on the input field, a 'popup' appears, if you click outside the red border it fades away. If you click on the select option it shouldn't dissappear! However on this point, Chrome doesn't work the same as IE/FF/Opera/Safari, and makes the div dissappear.
(Using Chrome 4.0.295.0)
Does anybody knows a work-around for Chrome?
Calling event.stopPropagation() on select elements did not work so far
