Modal showing on page load

Question

Hi I've written the following javascript to enable modals with dynamically created id tags to be positioned center screen via a resize function (regardless of their width and height).

However, on page load, the modal is showing, as opposed to having it shown onClick via a button. I'm a noob, so I'm not sure what I have to alter in my code so the modal is instead hidden on page load.

Javascript:

$('body').prepend('');

    $(function(){
        $(window).resize(function(){       

    // get the screen height and width  
    var maskHeight = $(window).height();  
    var maskWidth = $(window).width();

    // calculate the values for center alignment
    var dialogTop =  (maskHeight  - $('.modalbox').height())/2;  
    var dialogLeft = (maskWidth - $('.modalbox').width())/2; 

    // assign values to the overlay and dialog box
    $('#overlay').css({ height:maskHeight, width:maskWidth }).show();
    $('#modalcontainer').css({ top: dialogTop, left: dialogLeft}).show();
    }).resize();
    });

    $('a.modal').each(function() {
          var link = $(this);
          var id = link.attr('href');
          var target = $(id);               

          if($("#modalcontainer " + id).length === 0) {
              $('#modalcontainer').append(target);
          }

          $("#main " + id).remove();

          link.click(function() {
            $('#modalcontainer > div').hide();        
            target.show();
            $('#overlay').show();
            return false;
          });
        });

        $('.close').click(function() {
          $('#modalcontainer > div').hide();
          $('#overlay').hide();

          return false;
        });​

CSS:

#overlay {
      background: url(../img/overlay_bg.png);
      position:absolute;
      z-index:10;
    }

    #modalcontainer {
    position:absolute;
        z-index:20;
    }

HTML:

 <a href="#modal1" class="modal button plain">view modal</a> <div style="width:650px; height:400px;" id="modal1" class="modalbox"> <div class="box-header"> <p align="center">Here is your modal</p> <div class="box-content"> </div> <div align="center" class="action_bar"> <a href="#" class="close button blue">Close</a> </div> </div> </div>​ 

Demo at jsfiddle: http://jsfiddle.net/5Egf8/4/

Any help is greatly appreciated.?

Answer 1

Update: Now that I can see your Fiddle, I have revised my answer. See the working fork here: http://jsfiddle.net/JXHAt/3/

OK, third time's the charm. I made this much easier by eliminating the #modalcontainer. Instead, to show a .modalbox , you just hide the current .modalbox-active , then add .modalbox-active to the target you want to show.

Answer 2

Remove the first function() keyword; I don't think you need it:

$('body').prepend('');

$(window).resize(function(){       

// get the screen height and width  
var maskHeight = $(window).height();  
var maskWidth = $(window).width();

// calculate the values for center alignment
var dialogTop =  (maskHeight  - $('.modalbox').height())/2;  
var dialogLeft = (maskWidth - $('.modalbox').width())/2; 

// assign values to the overlay and dialog box
$('#overlay').css({ height:maskHeight, width:maskWidth }).show();
$('#modalcontainer').css({ top: dialogTop, left: dialogLeft}).show();
}).resize();
});

$('a.modal').each(function() {
      var link = $(this);
      var id = link.attr('href');
      var target = $(id);               

      if($("#modalcontainer " + id).length === 0) {
          $('#modalcontainer').append(target);
      }

      $("#main " + id).remove();

      link.click(function() {
        $('#modalcontainer > div').hide();        
        target.show();
        $('#overlay').show();
        return false;
      });
    });

    $('.close').click(function() {
      $('#modalcontainer > div').hide();
      $('#overlay').hide();

      return false;
    });​

Then make sure all of your () and {} are lining up correctly. Good luck!