javascript - .submit JS function not displaying CSS overlay in Safari (unless I cancel page load) - Stack Overflow

admin管理员组

文章数量:1305459

I'm having an odd problem with Safari in an overlay isn't displaying correctly on submitting the form.

What should happen is when the submit button on the form is clicked, the overlay appears over the form.

What is happening is that nothing is appearing (though it appears as though something is as I am unable to click said button again). What is interesting though is should I cancel the page load, the overlay appears.

Here is the javascript code that is running should the form be submitted.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(){
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
    });
}

Here is the CSS for the "loading" class, for what it's worth.

.loading {
    background: rgba(#999, 0.9);
    bottom: -10px;
    display: none;
    left: -20px;
    position: absolute;
    right: -20px;
    top: -10px;

    .text {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        }
    }

The JavaScript is loading (the console logs the "In here" and "Show Overlay" phrases respectively, and if cancelled the overlay appears). However the overlay it doesn't appear on click.

I've tried on the following browsers, successfully....

• Chrome (Apple Mac)
• Firefox (Apple Mac)
• Internet Explorer (Windows)

Any ideas would be helpful. Also if you need anything else, please let me know.

I'm having an odd problem with Safari in an overlay isn't displaying correctly on submitting the form.

What should happen is when the submit button on the form is clicked, the overlay appears over the form.

What is happening is that nothing is appearing (though it appears as though something is as I am unable to click said button again). What is interesting though is should I cancel the page load, the overlay appears.

Here is the javascript code that is running should the form be submitted.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(){
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
    });
}

Here is the CSS for the "loading" class, for what it's worth.

.loading {
    background: rgba(#999, 0.9);
    bottom: -10px;
    display: none;
    left: -20px;
    position: absolute;
    right: -20px;
    top: -10px;

    .text {
        color: #fff;
        font-size: 26px;
        font-weight: 700;
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        }
    }

The JavaScript is loading (the console logs the "In here" and "Show Overlay" phrases respectively, and if cancelled the overlay appears). However the overlay it doesn't appear on click.

I've tried on the following browsers, successfully....

• Chrome (Apple Mac)
• Firefox (Apple Mac)
• Internet Explorer (Windows)

Any ideas would be helpful. Also if you need anything else, please let me know.

• javascript
• jquery
• css
• safari

Share Improve this question Follow asked Apr 12, 2016 at 10:20 Rhys WynneRhys Wynne 39433 silver badges1717 bronze badges 5

• Did you try with z-index ? – Rayon Commented Apr 12, 2016 at 10:44
• I have tried it with a z-index of 2000000 on the loading class. Still no joy. – Rhys Wynne Commented Apr 12, 2016 at 13:13
• What is firing the submit of the form? Try adding the overlay first, then submitting the form. – hooda Commented Apr 12, 2016 at 13:27
• The overlay displays (if I remove display: none; it displays). Also the console log shows "Show Overlay", when the form is submitted (also "Hide Overlay" if the display: none; is not present). It's just not reflecting on the main site... – Rhys Wynne Commented Apr 12, 2016 at 13:48
• stackoverflow./q/36547476/5200704 – user5200704 Commented Apr 26, 2016 at 11:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3 +25

Checked in safari/windows and it is working fine. I suppose the problem was background: rgba(#999,0.9). You can check by interchanging ments for these lines in css-

/*background: rgba(#999, 0.9);*/
background: rgba(158,158,158,0.9);

Please refer this fiddle.

From what I remember Safari will block drawing stuff once it starts loading a page. Did you try preventing the submit, doing your stuff and just then submitting?

Something like this could work:

function main_form_overlay() {
var form_outer = jQuery('.main-form'),
form = jQuery('.main-form form'),
html,
overlay;

html = '<div class="loading"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

form_outer.append(html);

    overlay = jQuery('.main-form .loading');

    form.on('submit', function(event){
        //Prevent the form from submitting
        var e = event || window.event;
        e.preventDefault();
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }
        //Submit the form now
        $(this).submit();
    });
}

As an aside, I managed to fix this, and @PeterTheLobster came closest.

In short, in attaching to the 'click' listener, we then e.preventDefault(); the form, made sure the overlay was displayed by delaying the submission of the form by 1 second.

function main_form_overlay() {
    var form_outer = jQuery('.main-form'),
    form = jQuery('.main-form form'),
    html,
    overlay;

    html = '<div class="loading-overlay"><span class="text">Checking 77 Destinations, please Be Patient <i class="fa fa-circle-o-notch fa-spin"></i></span></div>';

    form_outer.append(html);

    overlay = jQuery('.main-form .loading-overlay');

    jQuery('#gform_submit_button_2').on('click', function(event){
        //Prevent the form from submitting
        var e = event || window.event;
        e.preventDefault();
        console.log("In Here!");

        if (!overlay.is(':visible')) {
            overlay.show();
            console.log("Show Overlay");
        } else {
            overlay.hide();
            console.log("Hide Overlay");
        }

        //Submit the form now
        window.setTimeout(function() {
            form = jQuery('.main-form form');
            form.submit();          
        },1000);
    });
}

Think you have an other problem. Are you sure the var overlay is at the right moment pointing your elements? Or is it undefined?

I think it is not pointing it. Just make a test. Put <div class="loading">testmessage</div> to your html and just add/replace the innerHtml on your function.

In that case you can be sure overlay = jQuery('.main-form .loading'); is valid.

本文标签：