Run some javascript on page load

Question

I am testing this simple code below and it works...

$(document).ready( function() {
   $('.show-modal').click( function() {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        //delay(openModal, 500);
        openModal();
   } );

} );

However when I run the code below it does not, all I have done is removed the click event and I was hoping this would load on page load instead of needing a click event but it is not working. Any ideas?

$(document).ready( function() {

        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        //delay(openModal, 500);
        openModal();

} );

As requested, the openModal function

openModal = function () {
    $('#modal-box').show();
    $('#modal-mask').show();
};

can you show what openModal() does?

Andreas Wong
– Andreas Wong

2012-04-02 08:23:27 +00:00
Commented Apr 2, 2012 at 8:23 — Andreas Wong
– Andreas Wong, Commented Apr 2, 2012 at 8:23
@NiftyDude I have added it above

JasonDavis
– JasonDavis

2012-04-02 08:25:05 +00:00
Commented Apr 2, 2012 at 8:25 — JasonDavis
– JasonDavis, Commented Apr 2, 2012 at 8:25

Yoshi · Accepted Answer · 2012-04-02 08:24:51Z

3

Mabye you need all resources to be loaded instead of just the dom. For this use:

$(window).load(function () {
  // images and stuff will be loaded
});

answered Apr 2, 2012 at 8:24

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

booyaa Over a year ago

if this fixed it, can you accept the answer so @yoshi can get the rep points. cheers!

JasonDavis Over a year ago

@booyaa I always do, it makes you wait 10 minutes though

erikvimz · Accepted Answer · 2012-04-02 08:28:59Z

1

Try this:

$(document).ready( function() {

        $('#modal-box').css("left", (($(window).width()/2) - ($('#modal-box').width()/2)) + 'px');
        $('#modal-box').css("top", (($(window).height()/2) - ($('#modal-box').height()/2)) + 'px');

        //delay(openModal, 500);
        openModal();

} );

answered Apr 2, 2012 at 8:28

erikvimz

5,4966 gold badges46 silver badges61 bronze badges

Comments

cprsd · Accepted Answer · 2012-04-02 08:28:39Z

-1

Browsers usually block popped up modals when they are opened onLoad of a page. That explains why it works when you do it on click. Try disabling your pop up blockers.

answered Apr 2, 2012 at 8:28

cprsd

4734 silver badges14 bronze badges

1 Comment

Ramesh Over a year ago

It is a div and not a new Window. Only new popup windows will be blocked.

Collectives™ on Stack Overflow

Run some javascript on page load

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related