When using Sharepoint 2010, each list item you edit will open in a new modal dialog box by default.
This dialog box appears as a new div with the class of ms-dlgContent. It also creates a div with the class of ms-dlgOverlay which acts as a grey overlay dimming the background. However, it does not alter the existing div that contains the background content, located within a div identified by the id of s4-workspace.
One issue that arises is when attempting to print the page while a dialog box is open. Since backgrounds do not print, the background of the dialog box and the ms-dlgOverlay div are ignored. This results in the fields of the dialog overlapping with the page content behind it, creating a messy appearance.
To address this, I have created a CSS stylesheet for printing purposes that hides the background content when a dialog is present. Although I can set the style of a div to display:none in the CSS sheet, I am unable to add a class to the s4-workspace element only if a dialog box is present. (I want the s4-workspace element to be visible when there is no dialog box open.)
I attempted to add the following script to my master page, but it did not work. I suspect this is because the dialog window does not exist during the initial page load, and I am unsure how to trigger my JavaScript code when a dialog opens or closes:
<script type="text/javascript">
jQuery(function() {
jQuery("#s4-workspace").removeClass("backgroundOfDialog");
//this should run if the ms-dlgContent class is found and do nothing otherwise
jQuery(".ms-dlgContent").parent().children("#s4-workspace").addClass("backgroundOfDialog");
});
</script>