jQuery change on click even to on load event

Question

I've got the following code which I've put together, and I need to change it from the onclick event to onload, so it loads the modal window automatically when the page is loaded. However, for the life of me I can't work out how do it, i've tried many a permutation it just doesn't seem to work!

$(document).ready(function() {  
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); 
        var popURL = $(this).attr('href'); 
        var query = popURL.split('?');
        var dim = query[1].split('&');
        var popWidth = dim[0].split('=')[1]; 

        $('#' + popID)
            .fadeIn()
            .css({ 'width': Number( popWidth ) })
            .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');

        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        $('body').append('<div id="fade"></div>'); 
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); 

        return false;
    });

    $('a.close, #fade').live('click', function() { 
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove(); 
        });
        return false;
    });
});

This loads it at the moment:

<a href="#?w=200" rel="popup_name" class="poplight">Popup</a>

Any help will be really appreciated, thanks

Which popup plugin are you using? If you check through it's documentation there is likely to be a trigger function or some such, which allows you to programmatically show a modal window through code without needing user interaction. — Rory McCrossan
– Rory McCrossan, Commented Nov 29, 2011 at 10:46
I've just googled the plugin name and found it. On the documentation there is a guide on setting up the popup on load: sohtanaka.com/web-design/inline-modal-window-w-css-and-jquery/… — Rory McCrossan
– Rory McCrossan, Commented Nov 29, 2011 at 10:49

Rory McCrossan · Accepted Answer · 2011-11-29 10:51:10Z

2

If you look up the documentation for the plugin you can move the logic for the popup into it's own function (called popOpen() in the example) and call that on load like this:

$('a.poplight[href=#?w=200]').popOpen();

answered Nov 29, 2011 at 10:51

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

1 Comment

MissCoder87 Over a year ago

Thanks for that matey, I didn't get it from there so didn't even think to google it! Life saver

Anil · Accepted Answer · 2011-11-29 10:49:10Z

0

Try:

$('a.poplight[href^=#]').trigger("click");

Or:

$('a.poplight[href^=#]').click();

These should be in your DOM Ready.

answered Nov 29, 2011 at 10:49

Anil

21.9k9 gold badges77 silver badges103 bronze badges

Comments

Leon · Accepted Answer · 2011-11-29 10:51:19Z

0

If I understood you correctly, you could try this:

$(document).ready(function() {

    $this = $('a.poplight[href^=#]');
    var popID = $this.attr('rel'); 
....

answered Nov 29, 2011 at 10:51

Leon

4,5521 gold badge22 silver badges24 bronze badges

Collectives™ on Stack Overflow

jQuery change on click even to on load event

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related