Facebook on Modal

Facebook on Modal

本文关键字：Modal on Facebook      更新时间：2023-09-26

我有一个Facebook 'Like'按钮以及一个'Facepile'轮询器在多步引导模态窗口，但他们只出现，如果你通过页面，并返回到他们要显示的页面。在第一次浏览页面时，它们没有被加载。

<script>
function displayPage(pageId) {
    $('div[id^="display"]').hide();
    $('#display'+pageId).show();
    $('.step').removeClass("active");
    $('#step'+pageId).addClass("active");

    if(pageId == 1) {
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }
        (document, 'script', 'facebook-jssdk'));
    };
}
</script>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <hgroup class="block fixed">
            <h3>Header</h3>
            <h4>Subheader</h4>
        </hgroup>
    </div>
    <div class="modal-body" id="content">
        <div id="display1" style="display:none;">
            <h1>LIKE OUR PAGE</h1>
            <div id="fb-root"></div>
            <div class="fb-like" data-href="https://www.facebook.com/myaddress" data-width="125" data-height="35" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
            <br><br>
            <div class="fb-facepile" data-href="https://www.facebook.com/myaddress" data-width="395" data-max-rows="1" data-colorscheme="light" data-size="large" data-show-count="true"></div>
        </div>
    </div>
</div>

最初我只是将facebook函数置于调用modal的同一函数中。当我这样修改它时，它工作了。

$(document).ready(function() {
    $("#myModal").on("show", function() {
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
});
function displayPage(pageId) {
    currentPageId = pageId;
    $('div[id^="display"]').hide();
    $('#display'+pageId).show();
    $('.step').removeClass("active");
    $('#step'+pageId).addClass("active");
    if(pageId == 1 || pageId == 2) {
    FB.XFBML.parse();
相关文章：