JQuery Overlay in Chrome/Safari (webkit) unable to make changes

问题

After spending several days on Google trying to find an answer, I am turning to the people that I should have started with. I have installed and am using Overlay with great success. The problem is being able to make jQuery changes to the overlay view. It works perfectly in IE and FF but will not work in Chrome or Safari (webkit). I realize that there are security protections built in webkit, but the view is on the same server as the rest of the website. What am I doing incorrect? Are there any tips on bypassing these securities? Any tips will help. If you have done this successfully, please include sample code. I need to finish this up today if at all possible. This sample is an excerpt of the code being used. Thank you, Ralph

var triggers = jQuery("input[rel]").overlay({
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9
        },
        effect: 'apple',
        onBeforeLoad: function() {
            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");
            var link = "index.php?page=account.billing&option=com_virtuemart";

            //Add the link and style attributes to the basic iframe
            //jQuery(theframe).attr({ src: link, style: 'height:650px; width:760px; border:none;' });
            jQuery(theframe).attr({ src: link, style: 'height:700px; width:840px; border:none;' });

            //Write the iframe into the wrap
            wrap.html(theframe);

        },
        onLoad: function(){
            var inFrame = this.getOverlay().find("#innerFrame");
            jQuery(inFrame).contents().find('form').attr('onsubmit','window.parent.CloseOverlayFromIframe();');



        }
    });

回答1:

Do not use Apple effect upon document.ready() event when using external stylesheets to prevent from unpredictable behaviour in Safari 3+ and Chrome (WebKit-based browsers). You will see it works in safari and chrome when you remove effect: 'apple',.

The site advises two way to solve it for apple effect:

Use $(window).load() instead. This will definitely be executed after the stylesheets have been loaded.
Define your overlay style directly on the page or inline for the element.

at the end of page.

来源：https://stackoverflow.com/questions/9007140/jquery-overlay-in-chrome-safari-webkit-unable-to-make-changes

标签

javascript

jquery

overlay