Blogging

Sharepoint 2010 modal dialog , apply different style/javascript at runtime from parent page

Sharepoint 2010 have a very good featuree of Modal dialog, Modal dialogs in sharepoint 2010 use the client library SP.UI.ModalDialog and showModalDialog

There come the requirement when you want to find the weather the modal dialog is opened or not and you want to modify certain style in modal dialog  from the parent page, this can be achieved by using  javascript  adding it to master page, where you can identify the window location and can create the javascript or style tag that can be add it to modal dialog while rendering.

For example adding the style tag.

<br />
	&lt;script type=&#39;text/javascript&#39;&gt;<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var isInIFrame = window.location != window.parent.location;<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (isInIFrame) {<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var style = document.createElement(&#39;style&#39;);<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // fileref.setAttribute(&quot;rel&quot;, &quot;stylesheet&quot;)<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.type = &#39;text/css&#39;;<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var css = &#39;.PageMainBody{ overflow-y: visible;}&#39;;<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (style.styleSheet) {<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; style.styleSheet.cssText = css;<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } else { style.appendChild(document.createTextNode(css)); }<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (typeof style != &quot;undefined&quot;)<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementsByTagName(&quot;head&quot;)[0].appendChild(style)<br />
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />
	&nbsp;&nbsp; &lt;/script&gt;<br />
	

or the same thing can be achieved using

<br />
	.ms-dialog .PageMainBody<br />
	{<br />
	&nbsp;&nbsp;&nbsp; overflow-y: visible;<br />
	}<br />
	

Thanks-
 

Comments are closed.