6

I'm trying to get a jQuery modal popup to appear when the user opens an opportunity detail page. The popup is being rendered when the page loads however it seems to be trapped inside the visualforce page element thats generating it rather than being presented over the top of the entire page.

Screenshot of trapped popup box

Here is the VF page code:

<apex:page sidebar="false" showHeader="false" standardController="Opportunity" rendered="{!Opportunity.Name != null}">

<apex:includeScript value="{!URLFOR($Resource.jQuery, '/jQuery/jquery-1.8.2.min.js')}"  />
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'jQuery/ui/jquery-ui-1.9.1.custom.min.js')}"  />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/jQuery/ui/css/ui-lightness/jquery-ui-1.9.1.custom.min.css')}"  />
<script>

var j$ = jQuery.noConflict();
var j$modalDialog = j$('<div></div>')
       .html('test message goes here')
       .dialog({
            autoOpen: false,
            title: 'My Modal Dialog',
            resizable: false,
            width: 400,
            height: 400,
            autoResize: true,
            modal: true,
            draggable: true
});
j$(document).ready(function(){
    j$modalDialog.dialog('open');
});
</script>
</apex:page>

I've read all the articles I can find on this but they are all based on the dialog being displayed when clicking a button. Oddly enough, if I use a button to trigger the display of the dialog box (using the same jquery and css assets) it displays the box over the entire screen as expected.

If I use the standard javascript window alert function inside of the visualforce page, the popup appears over the entire page as expected. This code works:

<apex:page sidebar="false" showHeader="false" standardController="Opportunity" rendered="{!Opportunity.Name != null}">
    <script>
        window.document.onload = new function(e)
        {
            alert('Test message goes here');
        }
    </script>
</apex:page>

But the jQuery dialog is much better looking so I'd rather go that route if I can get it working.

What am I missing here? How do I get the jQuery popup box to appear over the entire page?

Thanks!

  • How about showing this popup from sidebar? what you can do is generate HTML markup and store it as hidden HTML in VF page and then Sidebar component will pickup HTML and show it in popup. Here is blog on how to inject JS into Sidebar and use it - tehnrd.com/show-and-hide-buttons-on-page-layouts – Prafulla Patil Aug 18 '13 at 3:40
5

It's in technically possible (although unsupported) to use a custom button to inject arbitrary content into the page. See Changing the color of a custom button

You can likley modify this technique to REQUIRESCRIPT jquery+jqueryUI, and then REQUIRESCRIPT your own custom script file that creates the modal window.

If this works it would be subject to possibly breaking in future releases.

1

Try adding this to your dialog's options:

position: {my: "center", at: "center", of: window.top}

(Answer shamelessly purloined from https://stackoverflow.com/questions/15955595/jquery-ui-dialog-inside-of-an-iframe)

  • Thanks for the suggestion. I added that parameter but it only affected the alignment of the dialog within the VF page itself. Adding this also introduced multiple instances of this js error: Blocked a frame with origin "c.cs15.visual.force.com" from accessing a frame with origin "cs15.salesforce.com". Protocols, domains, and ports must match. – Scott McClung Aug 17 '13 at 18:14
  • 3
    This isn't going to work - by design - visualforce is served from a different domain to avoid injecting content into the standard UI. – ca_peterson Aug 17 '13 at 21:18
  • 2
    I believe you can ask Support to turn on a setting that basically says "Serve Visualforce pages from the salesforce.com domain" – Daniel N Aug 19 '13 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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