Что не так с этим всплывающим окном Facebook на основе jQuery?

#jquery #facebook

#jquery #Facebook

Вопрос:

 (function($){

$.fn.facebookTrafficPop = function(options){

        /* Setup the options for the tooltip that can be
           accessed from outside the plugin              */
        var defaults = {
            title: "Your Popup Title",
            message: "Your popup / call to action message!",
            url: "http://tyler.tc",
            showfaces: true,
            timeout: 25,
            closeable: true,
            wait: 0,
            lang: "en"
        };

        // Extend options and apply defaults if they are not set
        var options = $.extend(defaults, options);

        /* NEW In Version 1.4 - Localization
           Setup the localzation strings, add your own if needed              */
        var tstrings = {

            // This is your wait text i.e. '{or wait} xx seconds'
            orwait: {
                en: "Or wait",
                fr: "Ou attendre",
                de: "Order warten",
                it: "O attendere",
                es: "O esperar"
            },

            // seconds string
            seconds: {
                en: "Seconds",
                fr: "Secondes",
                de: "Sekunden",
                it: "Secondi",
                es: "Segundos"
            },

            closeable: {
                en: "Close",
                fr: "Fermer",
                de: "Namp;auml;he",
                it: "Chiudi",
                es: "Cerrar"
            }

        }

        /* Create a function that builds the popup html
           markup. Then, prepend the popup to the body */
        getPopHTML = function() {

            var tPop = '<div id="fblikebg"></div><div id="fblikepop"><div id="popup_head"><div id="closeable"></div><h1>' defaults.title '</h1></div><div id="popupMessage">' defaults.message '</div><div id="buttonArea"><div id="actionHolder"><fb:like id="fbLikeButton" href="' defaults.url '" show_faces="' defaults.showfaces '" width="450"></fb:like></div><div id="counter-display">' tstrings.orwait[defaults.lang] ' <span id="counter"> </span>  ' tstrings.seconds[defaults.lang] '.</div> <div style="clear:both"></div></div></div></div>'

            // Return the pop up markup
            return tPop;

        }

        // Create a variable to hold the markup ( Needed For I.E 8 6   7 )
        var markup = getPopHTML();

        // Prepend the popup into the body of the page
        $('#fbtpdiv').html( markup );

        // Get cookie to see if they already clicked like
        var cook = readCookie('fblikepop');

        // Get wait cookie
        var waitCook = readCookie('fblikepopwait');

        // Only show the pop up if the user has not clicked like already
        if(cook != 'true' amp;amp; waitCook != 'true'){

            // Get window width and height to center the pop up
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;
            var popupHeight = $("#fblikepop").height();
            var popupWidth = $("#fblikepop").width();

            // Simple division will let us make sure the box is centered on all screen resolutions
            $("#fblikepop").css({"position": "absolute","top": windowHeight / 2 - popupHeight / 2,"left": windowWidth/2-popupWidth/2});
            $("#fblikebg").css({"height": windowHeight});

            // Check if the closeable is set to true
            if(defaults.closeable == true){

                // If so, display a close button for the pop up
                $("#closeable").html('<a id="#fbflush" class="fbflush" onClick="fbLikeDump();" href="#">' tstrings.closeable[defaults.lang] ' x</a>');

            }

            // Set the background shadow active - higher opactity = darker background shadow
            $("#fblikebg").css({"opacity": "0.2"});

            // Fade in the background shadow
            $("#fblikebg").fadeIn("slow");

            // Fade in the popup box
            $("#fblikepop").fadeIn("slow");

            // Initiate the timer (more documentation on the countdown timer here: http://keith-wood.name/countdownRef.html)
            $('#counter').countdown({until: ' ' defaults.timeout 's', format: 'S', compact: true, description: '', onExpiry: fbLikeDump});

            // Check if the script should wait between popups
            if(defaults.wait != 0){

                // If so, set the wait cookie so it does not constantly pop up
                createWait('fblikepopwait', 'true', defaults.wait);

            }

            // Final parse check to ensure Like button appears on all browsers of all speeds
            FB.XFBML.parse();

        } // End if

}; // End Main Function

})(jQuery); // End Plugin

// This is our listener to check wether or not the user clicks the like button.
FB.Event.subscribe('edge.create', function(href) {

// If they did, close the pop up
fbLikeDump(true);

});

// function to remove the pop up from the screen
function fbLikeDump(action){

// Check if the user completed the like or if the timer ran out
if(action == true){

// Create the cookie to remember the user clicked like, 30 is the number of days it will expire in.
createCookie('fblikepop', 'true', 30);

} // End if

// Fade out the background shadow
$("#fblikebg").fadeOut("slow");

// Fade out the pop up itself
$("#fblikepop").fadeOut("slow");

}
  

Это ошибка, которая возникает:

введите описание изображения здесь

Ответ №1:

Вероятно, вам не хватает ссылки на jQuery.

Комментарии:

1. Возможно, jQuery загружается после вашего плагина? Использует ли что-нибудь еще в вашем приложении jQuery?

2. На самом деле это плагин для wordpress.. итак, некоторые другие плагины могут использовать jQuery. Однако снимок ошибки, который я вставил, является единичным случаем. т. е. ошибка была сгенерирована изолированно, а не при использовании этого кода в качестве плагина в wordpress.

Ответ №2:

Вы уверены, что загружаете jQuery, например, для

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  

Убедитесь, что тег script для jQuery находится в вашем <head> теге и что он действительно загружен (с помощью Chrome developer tools).

Комментарии:

1. Это действительно работает.. большое спасибо.. Я хотел показать вам большой палец, но моя репутация настолько низка, что я не могу : (простите меня за это