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

Answer 1

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