CODEWITHSUNDEEP
jquerymodal-dialog
cfz
cfz

Reputation: 343

Modal opens onload page

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);

});
});

Upvotes: 0

Views: 819

Answers (2)

mplungjan
mplungjan

Reputation: 177691

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);

    });
.
.
.

Upvotes: 2

Viktor S.
Viktor S.

Reputation: 12815

You can put jQuery('a[name=account]').trigger('click') at the end of your .ready function handler. But note that with selector like 'a[name=account]' click will be triggered on all <a name="account" and that may cause multiple modal windows to appear. Or popup for the last a will appear. Possibly you will need to set an id for some <a> in order to call only popup of that <a>

jQuery(document).ready(function() { 

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

//if close button is clicked
jQuery('.window .close').click(function (e) {
    .....
});     


jQuery(window).resize(function () {

    ....

});
jQuery('a[name=account]').trigger('click');
});

Upvotes: 0

Related Questions