Hack together a jQuery Modal Popup in Salesforce

Recently I had a use case where I needed a jQuery popup alert to display on a standard Opportunity detail page when the page is loaded by the user. There are a number of solutions that use a VisualForce page element to hold the jQuery code and a custom button or link to launch the JavaScript, but all of them display the popup when the button is clicked. When the JavaScript attempts to launch the popup alert on page load like I wanted (instead of a button click) it gets trapped inside the VisualForce element instead of being displayed over the whole page.

As frustrating as it is, this behavior is by design and is there to prevent cross site scripting attacks. Salesforce serves the VisualForce pages from a different domain than the rest of the site so the browser does not allow any JavaScript contained in that VisualForce page element to act on the page that it's embedded in.

Another possible solution was to use a sidebar component to hold the popup code, but since I needed it to display over the Opportunity page only, and it had to work when the user was using the old Agent Console, the sidebar component wouldn't work.

Thanks to this solution on StackExchange I was able to hack this one to work the way I wanted. It relies on the ability to add a {!REQUIRESCRIPT()} function inside a custom button or link. The JavaScript referenced in the REQUIRESCRIPT function will be executed as the page loads so it's not dependant on the user clicking the button.

To use this hack, create a custom detail page button and choose 'Execute JavaScript' for Behavior and 'OnClick JavaScript' for Content Source. In the formula editor for your new button we first need to load some jQuery resources with the following REQUIRESCRIPT lines.
{!REQUIRESCRIPT("//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js")}
{!REQUIRESCRIPT("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")}
The next thing we need to add is some jQuery CSS to make our new model popup pretty. We can inject CSS into our standard layout using the following segment of code.
var csslink = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css";
var newStyleSheet = document.createElement('link');
newStyleSheet.rel='stylesheet';
newStyleSheet.type='text/css';
newStyleSheet.href=styles;
document.getElementsByTagName("head")[0].appendChild(newStyleSheet);
To embed this script into our custom button we need to use a Base64 encoder like this one to convert the code into a Data URI. We insert that into a third REQUIRESCRIPT function with the data:application/javascript;base64, prefix.
{!REQUIRESCRIPT("data:application/javascript;base64,dmFyIGNzc0xpbmsgPSAiaHR0cHM6Ly9jb2RlLmpxdWVyeS5jb20vdWkvMS4xMC40L3RoZW1lcy91aS1saWdodG5lc3MvanF1ZXJ5LXVpLmNzcyI7CnZhciBuZXdTdHlsZVNoZWV0ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpOwpuZXdTdHlsZVNoZWV0LnJlbD0nc3R5bGVzaGVldCc7Cm5ld1N0eWxlU2hlZXQudHlwZT0ndGV4dC9jc3MnOwpuZXdTdHlsZVNoZWV0LmhyZWY9Y3NzTGluazsKZG9jdW1lbnQuZ2V0RWxlbWVudHNCeVRhZ05hbWUoImhlYWQiKVswXS5hcHBlbmRDaGlsZChuZXdTdHlsZVNoZWV0KTs=")}
Now that we have our resources loaded, we need to launch the popup itself. Here's the basic jQuery code we want to execute when the page finishes loading.
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');
});
Again, we'll encode this with the Base64 encoder and add it to a fourth REQUIRESCRIPT function.
{!REQUIRESCRIPT("data:application/javascript;base64,dmFyIGokID0galF1ZXJ5Lm5vQ29uZmxpY3QoKTsKdmFyIGokbW9kYWxEaWFsb2cgPSBqJCgnPGRpdj48L2Rpdj4nKQogICAgIC5odG1sKCd0ZXN0IG1lc3NhZ2UgZ29lcyBoZXJlJykKICAgICAuZGlhbG9nKHsKICAgICAgICAgIGF1dG9PcGVuOiBmYWxzZSwKICAgICAgICAgIHRpdGxlOiAnTXkgTW9kYWwgRGlhbG9nJywKICAgICAgICAgIHJlc2l6YWJsZTogZmFsc2UsCiAgICAgICAgICB3aWR0aDogNDAwLAogICAgICAgICAgaGVpZ2h0OiA0MDAsCiAgICAgICAgICBhdXRvUmVzaXplOiB0cnVlLAogICAgICAgICAgbW9kYWw6IHRydWUsCiAgICAgICAgICBkcmFnZ2FibGU6IHRydWUKICAgICAgfSk7CmokKGRvY3VtZW50KS5yZWFkeShmdW5jdGlvbigpewogICAgaiRtb2RhbERpYWxvZy5kaWFsb2coJ29wZW4nKTsKfSk7")}

When it's all said and done, your formula editor window should look something like this.

Add the new button to your Opportunity layout and when you open an Opportunity record you get a modal popup.

And it also works when viewing an Opportunity record in the Agent Console.