Click popup list

Question

Hi, I have a simple popup list showing as soon as I click on the popup menu. Unfortunately, this CSS popup is absolutely and without it, the popup gets under the page.
In addition, it is displayed in different positions in different browsers.

$self.next().bind('click', viewList); if (!settings.appendTo) { $self.after(createDropdown($self, selectboxCounter)); } else { var offset = $self.parent().offset(); $(settings.appendTo).append(createDropdown($self, selectboxCounter).css({ 'top': offset.top, 'left': offset.left, 'width': 100//'width': $self.parent().width() * 0.8 })); } } $self.trigger('change'); selectboxCounter++; }); // Hide dropdown when click is outside of the input or dropdown $(document).bind('click', hideDropdown); $('.sb-custom').find('.sb-select').live('keydown', selectKeypress); $('.sb-custom').bind('blur', clearKeyStrokes); $(document).delegate('.sb-dropdown', 'focus', viewList); return this; }; 

I want to place the popup at the position of the parent choice or the position of the menu. Also tune in to different browsers.

Answer 1

Recently, there has been a problem with widgets that I helped in development. The solution we came across was to have a list of pop-ups linked to the body of the document. With the body as a parent, we did not have to worry about other elements hiding the popup. Then we simply positioned it absolutely depending on where it was dumped from.

 var offset = $("#popupFromHere").offset(); $("#popup") .appendTo("body") .css({ left: offset.left top: offset.top + $this.outerHeight(true) });