Активируйте наложение jquery из функции JS вместо селектора

Question

прямо сейчас у меня хорошо работает этот оверлей jQuery при нажатии на ссылку, но я хочу изменить его, чтобы активировать оверлей, когда я вызываю какую-то функцию JS, такую ​​как activOverlay ().Пример кода, который у меня есть:

$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");
    });
});
});

И это способ, которым я активировал оверлей:

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

Дело в том, что мне нужно вызвать активацию оверлея из несколькихместа, и один из них - когда пользователь видит страницу 6-й раз, поэтому здесь не нажимается ни одна ссылка, тогда мне бы хотелось, чтобы, когда активируется такая функция, как activOverlay (), наложение активируется.

Answer 1

попробуйте:

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

Версия Fiddler здесь