SharePoint Branding – Hiding Header/Footer in Dialogs (Modal-Popup)

Recently, I was working in an Office 365 application and wanted to open a modal-pop on the click of an anchor tag from a custom publishing page. The requirement was to show a new item form in the modal pop-up. Although, I worked on this kind of requirement back in SharePoint 2010, but not in Office 365.

SharePoint allows us to hide elements from dialogs, however the CSS class to change such elements has changed from SharePoint 2010 to SharePoint 2013 & Office 365.

So, for example, when we create a custom master page, we usually add custom header and footer to System Master Page. This starts appearing the modal-pop which is not required. So the solution for this problem is:-

  1. In SharePoint 2010, the CSS class name was “s4-notdlg”. This class needs to be added to an HTML element which we want to hide in the modal-pop.
  2. In SharePoint 2013 or Office 365, we use the same method, just a different CSS class “ms-dialogHidden”.

NOTE:-

  1. You can add the ms-dialogHidden class to any HTML element in your Master Pages and Page Layouts.
  2. If you have created separate master pages for Site and System (Option available in site Settings Master Page), then you need to specify this class in System Master Page HTML.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s