Twitter share button (widget) not working with jquery fadeout function in firefox

前端未结

关注

 1  943

I\'m using firefox 50.1.0 when I add fadeout or fadein jquery functions the twitter share button doesn\'t show up. The iframe is getting loaded but the button is not showing

相关标签:

1条回答

逝去的感伤

2021-01-16 11:33

Generally, Keep your script references in the Head not the body. You need to include jQuery, Bootstrap css and Bootstrap js correctly to use it. This works by getting the widget script on click and then scanning the dom for the div with the widget code to execute solving the async problem with Firefox.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> Code Integration Close
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>Home</title>
</head>

<body>
    <div class="container" id="form-puzzle">


        <div class="col-md-12 text-align">
            <button class="btn btn-success btn-md btn-margin" type="submit" id="btn-submit">Submit</button>
        </div>
    </div>
    <div class="container" id="message-id">
        <div class="row">
            <div class="col-md-12 text-center message-color">
                <h1>Congrats !!!!!....</h1>
            </div>
            <div class="col-md-12 text-align" style="display:block !important;">
                <div class="gap"></div>
                <a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false">Tweet</a>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $('#message-id').hide();
            $('#btn-submit').click(function() {
                $.getScript("https://platform.twitter.com/widgets.js")
                    .done(function() {
                        $('#message-id').show(function() {
                            $('#form-puzzle').fadeOut(2000);
                            twttr.widgets.load(
                                document.getElementById("#message-id")
                            );
                        });
                    })
            });
        });
    </script>

</body>

</html>

0 讨论(0)