Main Image

<apex:page >

<html lang="en">
  <meta charset="utf-8"/>
   <title>jQuery UI Dialog - Modal message</title>
   <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"/>
   $(function() {
     $( "#dialog-message" ).dialog({
        modal: true,
         buttons: {
          Ok: function() {
           $( this ).dialog( "close" );

  <div id="dialog-message" title="Download complete">
     <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px  0;"></span>
   Your files have downloaded successfully into the My Downloads folder.
     Currently using <b>36% of your storage space</b>.

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>

  • Your code works fine for me in Chrome and Firefox - what browser are you running this on? Do you have any JavaScript errors? Apr 30 '14 at 7:28

I think the problem is you are not using Jquery Onready Function

var j$ = jQuery.noConflict();
$( document ).ready(function() {
   // Handler for .ready() called.

Also do an inspect element in browser to see whether Jquery files loaded properly or not and there are no script errors

  • The JQuery ready() function allows JavaScript to execute as soon as the DOM is ready, i.e. without waiting for images and other assets. You don't have to use it to execute JQuery code - it just generally makes the page faster leading to a better UX. Apr 30 '14 at 7:27
  • when i have used jquery in home page compoenets i have observed script started exceuting before DOM is ready and that led to Javascript undefined errors .This i have observed only when used with home page components Apr 30 '14 at 7:57
  • He is using shorthand for document.ready. api.jquery.com/ready. @BobBuzzard unless I'm missing something, in this scenario the document ready is necessary. Otherwise the jquery would execute looking for that DOM element (dialog-message) that wouldn't be loaded yet. Alternatively, he could move the javascript to the bottom of the page (at least after the dialog-message element).
    – Phil B
    Sep 28 '14 at 15:11

I think modals will not work because the iframe gets served from a different domain and hence violates Same origin security. They are fundamentally broken in embedded VisualForce. You will have to switch to pop ups or come up with a different alternate strategy.

Your Answer

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