Hi All,

 

I'm fairly new to JQuery but found it to be very interesting to learn and apply to websites I'm developing. I have a problem in showing dialogs with IE8. The page that displays the dialog works fine with all other browsers except IE8. Sometimes its showing the dialog but most of the times all it does is nothing. The thing I noticed is that the scrollbar of IE8 becomes so small like its displaying a very long page. Below is the script I'm using to show the dialog in my web page.

 

 <script type='text/javascript'>
  /* User Settings */
  var ovColor = 'black'; //HEX values allowed
  var ovOpacity = 0.8;   //0 - transparent / 1 - opaque.
  var ovSpeed = 0.5;     //animation speed. 0 if none.
 
  $(document).ready(function() {
   //dimensions of the overlay
   var __wHeight = $(window).height();
   var __wWidth = $(window).width();
   //var representing the overlay
   var $__ovName = $('#gmodal-overlay');

   //set the properties of the modal form
   $("#dialog-form-contact-us").dialog({
    autoOpen: false,
    width: 550,
    modal: true,
    position: 'top',
    show: 'slide',
    hide: 'slide',
    open:function() {
        $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove(); //removes the title bar of the form
    },
   });
  
   //code when the link is clicked
   $('a.contact-us').click(function(e) {
    e.preventDefault(); //do not follow the link specified by the href attribute
    $__ovName
     .css({
      'height':__wHeight,
      'width':__wWidth,
      'backgroundColor':ovColor,
      'opacity':0,
     }).show().stop().animate({ 'opacity': ovOpacity }, ovSpeed*1000, function() {
      //opens the modal form
      $("#dialog-form-contact-us").dialog("open");
     });
   });
   
   //code is the window is resized
   $(window).resize(function() {
    var __wHeight_Update = $(window).height();
    var __wWidth_Update = $(window).width();
    $__ovName.css({
     'height':__wHeight_Update,
     'width':__wWidth_Update
    })
   });

   //code for the contact me link
   $("a.contact-me").click(function() {
    alert('Under Construction...');
    $("#dialog-form-contact-us").dialog("close"); //closes the modal form
    $('#gmodal-overlay').fadeOut();    //removes the overlay 
   });

   //code for the close button
   $("#close_btn").click(function() {
    $("#dialog-form-contact-us").dialog("close"); //closes the modal form
    $('#gmodal-overlay').fadeOut();    //removes the overlay 
   });

   //code for the no thanks link
   $("a.no-thanks").click(function() {
    $("#dialog-form-contact-us").dialog("close"); //closes the modal form
    $('#gmodal-overlay').fadeOut();    //removes the overlay 
   });
  });   
 </script>

Any help is greatly appreciated. Thanks