Dynamically load CSS file on SharePoint 2010

I was in a situation where i had to load a share point page into SPDialog (SP.UI.ModalDialog.showModalDialog) after removing the unwanted tags like header, footer, the ribbon, etc. (just need to add the class=”s4-notdlg” for the tags you are expecting not to be included in the dialog).

So in that case you will be in a situation where you may need to remove the background of the dialog which automatically inherits from the parent, etc in other words you may have to load a new CSS when the dialog window opens. Please follow the steps as below to load a CSS file on the fly.

var isInIFrame = window.location != window.parent.location;
		 var fileref=document.createElement("link")
  		 fileref.setAttribute("rel", "stylesheet")
 		 fileref.setAttribute("type", "text/css")
 		 fileref.setAttribute("href", "/Style%20Library/ar-sa/css/My_Dialog.css")
 		 if (typeof fileref!="undefined")

refer the following link for more details to read about more on above.


if you want to change the dialog borer, the background of the dialog caption then add the following style into your CSS file

/* dialog border black and the title of the background */

.ms-dlgBorder, .ms-dlgContent {border:1px solid #333;}
.ms-dlgTitle {
border-bottom:1px solid #fff;


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

%d bloggers like this: