Active a Overlay jquery from a JS function instead a selector

Question

right now I have working this jQuery overlay good when a link is clicked, but I want to change it to activate the overlay when I call some kind of JS function like activateOverlay(). Example of the code that I have:

$j(document).ready(function() {
var $loading = $j('<img src="/images/loader.gif" alt="loading" title="loading">');
$j('.activateOverlayJquery a').each(function() {
    var $dialog = $j('<div></div>')
        .append($loading.clone());
    var $link = $j(this).one('click', function() {
        $dialog
            .load($link.attr('href') + ' #overlayWrap')
            .dialog({
                autoOpen: false,
                width: 625,
                modal: true
            });
        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
        $j('.ui-resizable-handle').css({ display: "none" });
        $j('.ui-dialog .ui-dialog-content').css({ padding: 0 });
        $j('.ui-dialog .ui-dialog-titlebar').css({ display: "none" });
        $j('.ui-widget-content').css({ backgroundColor: "transparent" });
        return false;
    });
    $j('.closeOverlayJquery').live("click", function() {
     $dialog.dialog("close");
    });
});
});

And This is the way that I active the overlay:

<span class="activateOverlayJquery"><a href="/page?overlay=1">Click here</a></span>

The point is that I need to call the overlay activation from several places and one of them is when the user see the page the 6th time so no link is clicked here, then I'd like that when a function like activateOverlay() is called the overlay get activated.

Answer 1

try it:

            $(document).ready(function () {
                $('body').append("<span><input type='checkbox'></input></span>");
                $('body').append("<span><input type='submit'></input></span>");
                $('body').append("<div id='overlay'></div>").css('height','100%');
                $('#overlay')
                        .addClass('overlay')
                        .css('position','fixed')
                        .css('background-color','silver')
                        .css('z-index','100')
                        .css('top','0px')
                        .css('bottom','0px')
                        .css('left','0px')
                        .css('right','0px')
                        .hide();
                $('#overlay').append("<div id='box'></div>");                    
                $('#box')
                        .append("<p>AGUARDE</p>")
                        .addClass('box')
                        .css('position','fixed')
                        .css('line-height','750%')
                        .css('text-align','center')
                        .css('z-index','101')
                        .css('top','40%')
                        .css('bottom','40%')
                        .css('left','40%')
                        .css('right','40%')
                $('input[type=submit], span input[type=checkbox]').                    
                    click(function (event) {
                        $('#overlay').show();
                    });
            });

The fiddler version is here