document.getElementById().click() gives error in Firefox and Google crome but only working in IE

document.getElementById().click() gives error in Firefox and Google crome but only working in IE

Hi, i am try to place a dialog window which load after 3 second on page but my current script is working fine on IE but it is not working on Firefox or rest of other browsers but it is also not giving any error in any other browser. can you please guide me how can i fix this problem so that it works on all platforms. thanks

here is complete website including script as under:


<html>
<head>
<title>Simple JQuery Modal Window from Queness</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>



$(document).ready(function() {   

    //select all the a tag with name equal to modal
        $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
       
        //Get the A tag
        var id = $(this).attr('href');
   
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
   
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
       
        //transition effect       
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",0.8);   
   
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
             
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
   
        //transition effect
        $(id).fadeIn(2000);
    });
   
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
       
        $('#mask').hide();
        $('.window').hide();
    });       
   
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });           
   
});

</script>

<style>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}
 
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:375px;
  height:203px;
  padding:10px;
  background-color:#ffffff;
}

#boxes #dialog1 {
  width:375px;
  height:203px;
}

#dialog1 .d-header {
  background:url(images/login-header.png) no-repeat 0 0 transparent;
  width:375px;
  height:150px;
}

#dialog1 .d-header input {
  position:relative;
  top:60px;
  left:100px;
  border:3px solid #cccccc;
  height:22px;
  width:200px;
  font-size:15px;
  padding:5px;
  margin-top:4px;
}

#dialog1 .d-blank {
  float:left;
  background:url(images/login-blank.png) no-repeat 0 0 transparent;
  width:267px;
  height:53px;
}

#dialog1 .d-login {
  float:left;
  width:108px;
  height:53px;
}

#boxes #dialog2 {
  background:url(images/notice.png) no-repeat 0 0 transparent;
  width:326px;
  height:229px;
  padding:50px 0 20px 25px;
}
</style>
</head>
<body>

<p><a href="#dialog" name="modal">Simple Window Modal</a></p>



<script>
    setTimeout("document.getElementById('modal').click()", 3000); // 3 second

</script>


<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window |
<a href="#"class="close"/>Close it</a>
</div>
 

<!-- Mask to cover the whole screen -->
  <div id="mask"></div>
</div>



</body>
</html>