SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a page which can be opened as a pop up page in sharepoint .Now when the page is opened as pop up I want some css to be modified.What is happening is that the code is able to successfully modify the label element but unable to modify the .ms-dlgTitle which is the window sharepoint opens which holds the page and is above the iFrame element holding the page.Can someone please tell me what I can do here.

<script src="/_layouts/1033/jQuery.js" type="text/javascript">
<script type="text/javascript"> 
 $(document).ready(function () 
 {if ("[?&]IsDlg=1")) 
        alert("doc is ready now"); 
        $('<style type="text/css">.ms-dlgTitle{ width: 200px; } #foo{background:black;                     }</style>').appendTo("head");}});

 function t(){  var options = SP.UI.$create_DialogOptions();options.url =           "http://sharepointhost:2266";options.height =      300;SP.UI.ModalDialog.showModalDialog(options);
<a class="s" onclick="javascript:t()">k</a> <label title="label1" id="foo">lbl</label>
share|improve this question
What exactly do you want to do to .ms-dlgTitleText? In your code, you are applying CSS to .ms-dlgTitle, but doing nothing to .ms-dlgTitleText. – Whitelaw Dec 6 '12 at 0:05
sorry was a mistake..changed it basically say inside the page which opens up in the pop up I ant to modify the ms-dlgTitle width ..This is just an example I have to change the background image and all but just the width for making it easy to read right now..The problem is how do I access that elemnt from inside the page – sharepoint99 Dec 6 '12 at 0:09
Just to clarify again: You have a page A with a link on it. That link opens a dialog of page B, on top of page A. You want to have CSS change on page A (e.g. background, dialog frame widths). – Whitelaw Dec 6 '12 at 0:15
exactly..basicaly not everything just the dialogue box stuff like title border etc. – sharepoint99 Dec 6 '12 at 0:28

    $(document).ready(function () {           

        if ("search=1")) {

            $("#dialogTitleSpan", parent.document).css({                    
                "line-height": "100%",
                "padding-left": "2px !important",                   
                "padding-top": "31px"


The above is basically what was needed.It access the parent doc and change the css properties.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.