Question

I have this code for modal, but it only appears when the button assigned for this modal is clicked.

I want my modal to be automatically loaded along with the page without clicking any button.

How will I do that?

jQuery(document).ready(function() { 

//select all the a tag with name equal to modal
jQuery('a[name=account]').click(function(e) {
    //Cancel the link behavior
    e.preventDefault();

    //Get the A tag
    var id = jQuery(this).attr('href');

    //Get the screen height and width
    var maskHeight = jQuery(document).height();
    var maskWidth = jQuery(window).width();

    //Set heigth and width to mask to fill up the whole screen
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    jQuery('#mask').fadeIn(400);    
    jQuery('#mask').fadeTo(400,0.8);    

    //Get the window height and width
    var winH = jQuery(window).height();
    var winW = jQuery(window).width();

    //Set the popup window to center
    jQuery(id).css('top',  winH/2-jQuery(id).height()/2);
    jQuery(id).css('left', winW/2-jQuery(id).width()/2);

    //transition effect
    jQuery(id).fadeIn(400); 

});

//if close button is clicked
jQuery('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();

    jQuery('#mask').hide();
    jQuery('.window').hide();
});     


jQuery(window).resize(function () {

    var box = jQuery('#boxes .window');

    //Get the screen height and width
    var maskHeight = jQuery(document).height();
    var maskWidth = jQuery(window).width();

    //Set height and width to mask to fill up the whole screen
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

    //Get the window height and width
    var winH = jQuery(window).height();
    var winW = jQuery(window).width();

    //Set the popup window to center
    box.css('top',  winH/2 - box.height()/2);
    box.css('left', winW/2 - box.width()/2);

});
});

Answer 1

Like this

function pop(id) {

    //Get the screen height and width
    var maskHeight = jQuery(document).height();
    var maskWidth = jQuery(window).width();

    //Set heigth and width to mask to fill up the whole screen
    jQuery('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    jQuery('#mask').fadeIn(400);    
    jQuery('#mask').fadeTo(400,0.8);    

    //Get the window height and width
    var winH = jQuery(window).height();
    var winW = jQuery(window).width();

    //Set the popup window to center
    jQuery(id).css('top',  winH/2-jQuery(id).height()/2);
    jQuery(id).css('left', winW/2-jQuery(id).width()/2);

    //transition effect
    jQuery(id).fadeIn(400); 

}

jQuery(document).ready(function() { 
    pop("some ID"); 
    //select all the a tag with name equal to modal
    jQuery('a[name=account]').click(function(e) {
      //Cancel the link behavior
      e.preventDefault();

      //Get the A tag
      var id = jQuery(this).attr('href');
      pop(id);

    });
.
.
.