How to: Remove custom master page elements from modal dialogue popup screens in SharePoint 2010

During the build phase of a recent client project of ours, we ran into an unexpected issue with the SharePoint 2010 modal dialogue popup windows. After building a beautiful master page layout, we were taken back to see that certain elements from the site master page design were being displayed in the dialogue popup for list items (new, edit, view). 

As you can see from the screenshot below, these elements were unnecessary and to be quite honest flat out ruined the layout. Why in the world would someone want to add an item that hasn't even been created yet to their favorites list? They wouldn't. And we don't want them to try. 

After a bit of Googling, I discovered that the "fix" for this solution was simply to code master pages with the dialogue popups in mind. Microsoft was clever enough to give us an OOB CSS class in SharePoint named "s4-notdlg". This class can be applied to your HTML elements (in your master page) that you don't want to display in your dialogue popups. This can be used to hide anything from custom headers, custom navigation, custom footers, to any other elements that you notice interfering with your dialogue popups. See our example below. 

After a few div class edits, you can see the intrusive navigation elements are no longer present on the dialogue popup screen. So there you have it, the solution is simple: If you don't want a custom element displayed in the dialogue popup, just add the CSS class "s4-notdlg" to your HTML element class. Happy building! 

Reference: http://sharepoint.jsturges.com/2011/07/hide-custom-header-elements-from-modal-popup-windows/