If you look at the HTML template for one of your widgets you may notice there’s a class “ng_buzzContainer” on the top-level element. You may also notice that there are no CSS styles attached to that class. So why is it there? This container exists so that the widget knows where to put popups. When the widget shows a popup such as an email dialog or the “Get This” dialog, it finds that node and places the popup over it.

This means a couple things to you as a widget author. First, be sure to leave the ng_buzzContainer class in the widget, or be sure to include it if you’re writing a widget from scratch. If you don’t have an element with that class, the widget will still try to show the popups appropriately, but it works a lot better if that class is there. If you don’t have it, your widget will be open to some odd rendering issues. For example your "Get This" dialog may stretch all the way accross your page. Or in IE6 standards mode, popups may render at the height of one line of text.   ...and so forth.

Secondly, having this container intact means you can control where the popups appear. When the user clicks something that would cause a popup (eg, the email icon), the widget will start walking up the DOM from the node that was clicked. The first node it encounters with the ng_buzzContainer class is the one that the popup will cover. So, for instance, you could make the popup cover everything in your widget except the header and footer, or just cover one post. Note that you can have multiple elements with the ng_buzzContainer class, so different popups can be made to appear in different places if you’re clever.