jQuery modal window not working in internet explorer

Question

I have an old website, which has been replaced by two websites, and went about making a modal window to guide people to the correct site.

I can only serve HTML files on the old site, and the structure of the HTML is not very uniform. I decided to add a bit of jQuery to the head of the document, which adds a modal window to the page, giving people links to the new sites.

This all works fine on Chrome, Safari and Firefox on Linux and Mac, but when testing on internet explorer on a PC, it looks all wrong, and does not work at all. I have opened up the console, and get no errors.

  $(function(){
    var disappear = function(){
      // window.location = window.location
      var $m = $('.modal')
      $m.eq(0).fadeOut()
      $m.hide('slow')
    }
    $('body').append(
      $("<div class='modal'>").css({
        position: 'fixed',
        width: '100%',
        height: '100%',
        backgroundColor: '#000',
        opacity: .8,
        top: 0,
        left: 0
      })).click(disappear).after($("<div class='modal'>").css({
        position: 'fixed',
        width: 600,
        // height: 300,
        backgroundColor: '#FFE',
        borderRadius: 10,
        border: "5px solid #005400",
        top: '10%',
        left: '50%',
        marginLeft: -300,
        padding: '1em',
        fontFamily: 'trebuchet ms, sans-serif'
      }).html("<h2>Please be advised</h2><p>\
The information on this website is maintained for historical purposes.<br>\
It has not been updated since 2009.<br>\
However, Tesfa Community Tourism continues to thrive.<br>\
<h3>For up to date information...</h3>\
<a href='http://tesfatours.com/?from=cbtcom' class='button green'>Book with Tesfa Tours</a>\
<a href='http://community-tourism-ethiopia.org/?from=cbtcom' class='button sand'>Community website</a>\
<a href='#' id='close' class='button'>Continue to archive site</a>\
</p>\
"))
    $('#close').css({fontSize:'12px'}).live('click',disappear);
    $('table table').eq(1).html(myString)
  })

Any ideas as to why this fails appreciated.

Answer 1

Try using this in your CSS and let me know then --

filter:alpha(opacity=80);
opacity: 0.8;

Answer 2

This is generally happening with IE when you forget about a little character like comma (,) or semicolon (;) or curly braces ({ }) . Whatever you have written in above code I have checked this is right, but in some other cases you have to check for all functions.

I have also faced this type of problem and I miss the , in one function. In my opinion lets have a check like this:

$('#close').css({fontSize:'12px'}).live('click',disappear);
    $('table table').eq(1).html(myString)
});

I have added a semicolon in last.