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 activateO

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