5

Imagemain

Main Image

<apex:page >

<html lang="en">
 <head>
  <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"/>
 <script>
   $(function() {
     $( "#dialog-message" ).dialog({
        modal: true,
         buttons: {
          Ok: function() {
           $( this ).dialog( "close" );
         }
       }
    });
  });
   </script>
  </head>
 <body>

  <div id="dialog-message" title="Download complete">
    <p>
     <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.
  </p>
  <p>
     Currently using <b>36% of your storage space</b>.
  </p>
</div>

<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>

   </body>
   </html>
</apex:page>
Improve this question
1
  • Your code works fine for me in Chrome and Firefox - what browser are you running this on? Do you have any JavaScript errors?
    – Bob Buzzard
    Commented Apr 30, 2014 at 7:28

2 Answers 2

Reset to default
1

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

Improve this answer
3
  • 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.
    – Bob Buzzard
    Commented Apr 30, 2014 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
    – Mohith Shrivastava
    Commented Apr 30, 2014 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
    Commented Sep 28, 2014 at 15:11
1

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.

Improve this answer

You must log in to answer this question.