Конфликт

sergey_prusov · 9 Ноя 2013

Для работы PopUp окон на сайте используется это:

PHP:

<script type="text/javascript">
    //<![CDATA[
      $.setupJMPopups({
        screenLockerBackground: "#000",
        screenLockerOpacity: "0.7"
      });

      function openStaticPopup() {
        $.openPopupLayer({
          name: "loginPopup",
          width: 328,
          target: "loginform"
        });
      }
    //]]>
</script>

и это:

PHP:

/**
* jmpopups
* Copyright (c) 2009 Otavio Avila (http://otavioavila.com)
* Licensed under GNU Lesser General Public License
*
* @docs http://jmpopups.googlecode.com/
* @version 0.5.1
*
*/


(function($) {
    var openedPopups = [];
    var popupLayerScreenLocker = false;
    var focusableElement = [];
    var setupJqueryMPopups = {
        screenLockerBackground: "#000",
        screenLockerOpacity: "0.5"
    };

    $.setupJMPopups = function(settings) {
        setupJqueryMPopups = jQuery.extend(setupJqueryMPopups, settings);
        return this;
    }

    $.openPopupLayer = function(settings) {
        if (typeof(settings.name) != "undefined" && !checkIfItExists(settings.name)) {
            settings = jQuery.extend({
                width: "auto",
                height: "auto",
                parameters: {},
                target: "",
                success: function() {},
                error: function() {},
                beforeClose: function() {},
                afterClose: function() {},
                reloadSuccess: null,
                cache: false
            }, settings);
            loadPopupLayerContent(settings, true);
            return this;
        }
    }
   
    $.closePopupLayer = function(name) {
        if (name) {
            for (var i = 0; i < openedPopups.length; i++) {
                if (openedPopups[i].name == name) {
                    var thisPopup = openedPopups[i];
                   
                    openedPopups.splice(i,1)
                   
                    thisPopup.beforeClose();
                   
                    $("#popupLayer_" + name).fadeOut(function(){
                        $("#popupLayer_" + name).remove();
                   
                        focusableElement.pop();
   
                        if (focusableElement.length > 0) {
                            $(focusableElement[focusableElement.length-1]).focus();
                        }
   
                        thisPopup.afterClose();
                        hideScreenLocker(name);
                    });
                   
                   
 
                    break;
                }
            }
        } else {
            if (openedPopups.length > 0) {
                $.closePopupLayer(openedPopups[openedPopups.length-1].name);
            }
        }
       
        return this;
    }
   
    $.reloadPopupLayer = function(name, callback) {
        if (name) {
            for (var i = 0; i < openedPopups.length; i++) {
                if (openedPopups[i].name == name) {
                    if (callback) {
                        openedPopups[i].reloadSuccess = callback;
                    }
                   
                    loadPopupLayerContent(openedPopups[i], false);
                    break;
                }
            }
        } else {
            if (openedPopups.length > 0) {
                $.reloadPopupLayer(openedPopups[openedPopups.length-1].name);
            }
        }
       
        return this;
    }

    function setScreenLockerSize() {
        if (popupLayerScreenLocker) {
            $('#popupLayerScreenLocker').height($(document).height() + "px");
            $('#popupLayerScreenLocker').width($(document.body).outerWidth(true) + "px");
        }
    }
   
    function checkIfItExists(name) {
        if (name) {
            for (var i = 0; i < openedPopups.length; i++) {
                if (openedPopups[i].name == name) {
                    return true;
                }
            }
        }
        return false;
    }
   
    function showScreenLocker() {
        if ($("#popupLayerScreenLocker").length) {
            if (openedPopups.length == 1) {
                popupLayerScreenLocker = true;
                setScreenLockerSize();
                $('#popupLayerScreenLocker').fadeIn();
            }
 
            if ($.browser.msie && $.browser.version < 7) {
                $("select:not(.hidden-by-jmp)").addClass("hidden-by-jmp hidden-by-" + openedPopups[openedPopups.length-1].name).css("visibility","hidden");
            }
             
            $('#popupLayerScreenLocker').css("z-index",parseInt(openedPopups.length == 1 ? 999 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 1);
        } else {
            $("body").append("<div id='popupLayerScreenLocker'><!-- --></div>");
            $("#popupLayerScreenLocker").css({
                position: "absolute",
                background: setupJqueryMPopups.screenLockerBackground,
                left: "0",
                top: "0",
                opacity: setupJqueryMPopups.screenLockerOpacity,
                display: "none"
            });
            showScreenLocker();

            $("#popupLayerScreenLocker").click(function() {
                $.closePopupLayer();
            });
        }
    }
   
    function hideScreenLocker(popupName) {
        if (openedPopups.length == 0) {
            screenlocker = false;
            $('#popupLayerScreenLocker').fadeOut();
        } else {
            $('#popupLayerScreenLocker').css("z-index",parseInt($("#popupLayer_" + openedPopups[openedPopups.length - 1].name).css("z-index")) - 1);
        }
 
        if ($.browser.msie && $.browser.version < 7) {
            $("select.hidden-by-" + popupName).removeClass("hidden-by-jmp hidden-by-" + popupName).css("visibility","visible");
        }
    }
   
    function setPopupLayersPosition(popupElement, animate) {
        if (popupElement) {
            if (popupElement.width() < $(window).width()) {
                var leftPosition = (document.documentElement.offsetWidth - popupElement.width()) / 2;
            } else {
                var leftPosition = document.documentElement.scrollLeft + 5;
            }

            if (popupElement.height() < $(window).height()) {
                var topPosition = document.documentElement.scrollTop + ($(window).height() - popupElement.height()) / 2;
            } else {
                var topPosition = document.documentElement.scrollTop + 5;
            }
           
            var positions = {
                left: leftPosition + "px",
                top: topPosition + "px"
            };
           
            if (!animate) {
                popupElement.css(positions);
            } else {
                popupElement.animate(positions, "slow");
            }
                       
            setScreenLockerSize();
        } else {
            for (var i = 0; i < openedPopups.length; i++) {
                setPopupLayersPosition($("#popupLayer_" + openedPopups[i].name), true);
            }
        }
    }

    function showPopupLayerContent(popupObject, newElement, data) {
        var idElement = "popupLayer_" + popupObject.name;

        if (newElement) {
            showScreenLocker();
           
            $("body").append("<div id='" + idElement + "'><!-- --></div>");
           
            var zIndex = parseInt(openedPopups.length == 1 ? 1000 : $("#popupLayer_" + openedPopups[openedPopups.length - 2].name).css("z-index")) + 2;
        }  else {
            var zIndex = $("#" + idElement).css("z-index");
        }

        var popupElement = $("#" + idElement);
       
        popupElement.css({
            visibility: "hidden",
            width: popupObject.width == "auto" ? "" : popupObject.width + "px",
            height: popupObject.height == "auto" ? "" : popupObject.height + "px",
            position: "absolute",
            "z-index": zIndex
        });
       
        var linkAtTop = "<a href='#' class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;'>&nbsp;</a><input class='jmp-link-at-top' style='position:absolute; left:-9999px; top:-1px;' />";
        var linkAtBottom = "<a href='#' class='jmp-link-at-bottom' style='position:absolute; left:-9999px; bottom:-1px;'>&nbsp;</a><input class='jmp-link-at-bottom' style='position:absolute; left:-9999px; top:-1px;' />";

        popupElement.html(linkAtTop + data + linkAtBottom);
       
        setPopupLayersPosition(popupElement);

        popupElement.css("display","none");
        popupElement.css("visibility","visible");
       
        if (newElement) {
            popupElement.fadeIn();
        } else {
            popupElement.show();
        }

        $("#" + idElement + " .jmp-link-at-top, " +
          "#" + idElement + " .jmp-link-at-bottom").focus(function(){
            $(focusableElement[focusableElement.length-1]).focus();
        });
       
        var jFocusableElements = $("#" + idElement + " a:visible:not(.jmp-link-at-top, .jmp-link-at-bottom), " +
                                  "#" + idElement + " *:input:visible:not(.jmp-link-at-top, .jmp-link-at-bottom)");
                         
        if (jFocusableElements.length == 0) {
            var linkInsidePopup = "<a href='#' class='jmp-link-inside-popup' style='position:absolute; left:-9999px;'>&nbsp;</a>";
            popupElement.find(".jmp-link-at-top").after(linkInsidePopup);
            focusableElement.push($(popupElement).find(".jmp-link-inside-popup")[0]);
        } else {
            jFocusableElements.each(function(){
                if (!$(this).hasClass("jmp-link-at-top") && !$(this).hasClass("jmp-link-at-bottom")) {
                    focusableElement.push(this);
                    return false;
                }
            });
        }
       
        $(focusableElement[focusableElement.length-1]).focus();

        popupObject.success();
       
        if (popupObject.reloadSuccess) {
            popupObject.reloadSuccess();
            popupObject.reloadSuccess = null;
        }
    }
   
    function loadPopupLayerContent(popupObject, newElement) {
        if (newElement) {
            openedPopups.push(popupObject);
        }
       
        if (popupObject.target != "") {
            showPopupLayerContent(popupObject, newElement, $("#" + popupObject.target).html());
        } else {
            $.ajax({
                url: popupObject.url,
                data: popupObject.parameters,
                cache: popupObject.cache,
                dataType: "html",
                method: "GET",
                success: function(data) {
                    showPopupLayerContent(popupObject, newElement, data);
                },
                error: popupObject.error
            });
        }
    }
   
    $(window).resize(function(){
        setScreenLockerSize();
        setPopupLayersPosition();
    });
   
    $(document).keydown(function(e){
        if (e.keyCode == 27) {
            $.closePopupLayer();
        }
    });
})(jQuery);

Когда это все включено - работает все прекрасно, но когда я подключаю вот этот скрипт, то ПопАп не работает (ни какой реакции). Что это может быть?

PHP:

$(document).ready(function() {
   
    var LinkTitle = $(document).attr('title');
   
    var LinkUrl = window.location.href;
   
    var LinkParent = window.location.hostname;
   
    LinkTitle=encodeURIComponent(LinkTitle);
   
    LinkUrl=encodeURIComponent(LinkUrl);
   
   
    // Вставка блока с закладками и блока затемнения
    $('body').append('<div class="shad" style="display: none;width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: #000;"></div>');
   
    $('body').append('<div id="tt_social" style="position: fixed;left: 0;top: 50%;width: 30px;height: 215px;margin: -90px 0 0 0;background: #f1f1f1;border-radius:0 5px 5px 0;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border: 2px #fff solid;box-shadow:2px 0px 10px 0 #d9d9d9;-webkit-box-shadow:2px 0px 10px 0 #d9d9d9;-moz-box-shadow:2px 0px 10px 0 #d9d9d9;border-left: 0;"></div>');
   
    //Массив ссылок
    var LinksItem = [
    'http://vkontakte.ru/share.php?url='+LinkUrl+'" title="Поделиться ВКонтакте"',
    'http://www.facebook.com/sharer.php?u='+LinkUrl+'&t='+LinkTitle+'" title="Добавить в Facebook"',
    'http://twitter.com/share?text='+LinkTitle+'&url='+LinkUrl+'" title="Добавить в Twitter"',
    'http://www.liveinternet.ru/journal_post.php?action=n_add&cnurl='+LinkUrl+'&cntitle='+LinkTitle+'" title="Добавить в LiveInternet"',
    'http://zakladki.yandex.ru/newlink.xml?url='+LinkUrl+'&name='+LinkTitle+'" title="Добавить в Яндекс закладки"',
    'http://connect.mail.ru/share?url='+LinkUrl+'&title='+LinkTitle+'" title="Добавить в Мой Мир"',
    'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl='+LinkUrl+'&title='+LinkTitle+'" title="Добавить в Одноклассники"',
    'http://www.livejournal.com/update.bml?event='+LinkUrl+'&subject='+LinkTitle+'" title="Добавить в ЖЖ"'
    ];
   
   
    var sdvig = 0;
    var sdvig2 = 0;
   
    // Построение списка закладок
    for (i=0; i<LinksItem.length; i++)
    {
        var getLinks = $('<a href="'+LinksItem[i]+' style="display: block;position: absolute;left: 5px;top:'+sdvig2+'px;width: 20px;height: 20px;background: url(/templates/ps-dude/images/fav.png) left -'+sdvig+'px no-repeat;margin: 10px 0 0 0;color: #888;text-decoration: none;font-size: 11px;" target="_blank"><span></span></a>');
        getLinks.appendTo("#tt_social");
        var sdvig = sdvig + 20;
        var sdvig2 = sdvig2 + 25;
    }
   
    // Эффекты при наведении на ссылку
    $('#tt_social a').hover(
        function() {
          $(this).css({
                'box-shadow':'0 0px 10px 0 #fff',
                '-webkit-box-shadow':'0 0px 10px 0 #fff',
                '-moz-box-shadow':'0 0px 10px 0 #fff',
                'border-radius':'5px',
                '-webkit-border-radius':'5px',
                '-moz-border-radius':'5px'
            });
           
            var linkTitle = $(this).attr('title');
            var thisSpan = $(this).find('span');
            thisSpan.text(linkTitle);
            $(this).find('span').css({
                'position':'absolute',
                'display':'block',
                'padding':'5px',
                'background':'#fff',
                'width':'150px',
                'left':'30px',
                'border-radius':'0 5px 5px 0',
                '-webkit-border-radius':'0 5px 5px 0',
                '-moz-border-radius':'0 5px 5px 0'
            });
        },
        function() {
            $(this).css({
                'box-shadow':'none',
                '-webkit-box-shadow':'none',
                '-moz-box-shadow':'none',
                'border-radius':'none',
                '-webkit-border-radius':'none',
                '-moz-border-radius':'none'
            });
            $(this).find('span').css({
            'display':'none'           
            });
        }
    );
   
    // Эффекты при наведении на блок с ссылками
    $('#tt_social').hover(
        function() {
            $(this).animate({
                'width':'40px'
            });
            $(this).find('a').animate({
                'left':'10px'
            });
            $(this).css({'background':'#727272'});
            $('.shad').css({
                'opacity':'0.2',
                'display':'block'
            });
        },
        function() {
            $(this).animate({
                'width':'30px'
            });
            $(this).find('a').animate({
                'left':'5px'
            });
            $(this).css({'background':'#f1f1f1'});
            $('.shad').css({
                'opacity':'0',
                'display':'none'
            });
        }
    );
   
   
});

sergey_prusov · 16 Ноя 2013

Что никто не знает в чем причина?

esche · 16 Ноя 2013

sergey_prusov написал(а):
Что никто не знает в чем причина?

Причина:
- либо в неправильном подключении скриптов
- либо в конфликте скриптов

Firebug (или любой другой отладчик) о каких-нибудь JavaScript ошибках сообщает?

Конфликт

sergey_prusov

Участник

sergey_prusov

Участник

esche

Мой дом здесь!