Question

仅在Firefox中，如果单击标签上的“有什么问题...”按钮，它会翻转然后消失在堆栈中而不是保持在最顶层。这将继续发生，直到我拖动其中一个标签，然后网站完美运行。

我想我已经将问题缩小到了bringToFront（）函数。如果我以任何方式禁用它，问题就会消失。我猜它在某种程度上与z-index竞争，顶部是卡片翻转功能。这是JS - 任何想法？

谢谢！

/* CSS3 card flip by Chris Ruppel
 * http://css3playground.com/flip-card.php
 */

$(document).ready(function(){

    $('.label1 .action').click(function(e){
            $('.label1').addClass('flip');
            e.preventDefault();
        });
    $('.label1 .label1-submit').click(function(e){
            $('.label1').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label2 .action').click(function(e){
            $('.label2').addClass('flip');
            e.preventDefault();
        });
    $('.label2 .label2-submit').click(function(e){
            $('.label2').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label3 .action').click(function(e){
            $('.label3').addClass('flip');
            e.preventDefault();
        });
    $('.label3 .label3-submit').click(function(e){
            $('.label3').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label4 .action').click(function(e){
            $('.label4').addClass('flip');
            e.preventDefault();
        });
    $('.label4 .label4-submit').click(function(e){
            $('.label4').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label5 .action').click(function(e){
            $('.label5').addClass('flip');
            e.preventDefault();
        });
    $('.label5 .label5-submit').click(function(e){
            $('.label5').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label6 .action').click(function(e){
            $('.label6').addClass('flip');
            e.preventDefault();
        });
    $('.label6 .label6-submit').click(function(e){
            $('.label6').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label7 .action').click(function(e){
            $('.label7').addClass('flip');
            e.preventDefault();
        });
    $('.label7 .label7-submit').click(function(e){
            $('.label7').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label8 .action').click(function(e){
            $('.label8').addClass('flip');
            e.preventDefault();
        });
    $('.label8 .label8-submit').click(function(e){
            $('.label8').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label9 .action').click(function(e){
            $('.label9').addClass('flip');
            e.preventDefault();
        });
    $('.label9 .label9-submit').click(function(e){
            $('.label9').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label10 .action').click(function(e){
            $('.label10').addClass('flip');
            e.preventDefault();
        });
    $('.label10 .label10-submit').click(function(e){
            $('.label10').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label11 .action').click(function(e){
            $('.label11').addClass('flip');
            e.preventDefault();
        });
    $('.label11 .label11-submit').click(function(e){
            $('.label11').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

    $('.label12 .action').click(function(e){
            $('.label12').addClass('flip');
            e.preventDefault();
        });
    $('.label12 .label12-submit').click(function(e){
            $('.label12').removeClass('flip');
            // just for effect we'll update the content
            e.preventDefault();
        });

});

/* Enable draggable labels with easing
 */

$(window).load(function(){
$(function() {
    $(".draggable").draggable(
    {stack: "div"},
    {helper: function(){
            return $('<div></div>').css('opacity',0);
        },
        drag: function(event, ui){
            var p = ui.helper.position();
            $(this).stop().animate({
                top: p.top,
                left: p.left
            },1000,'easeOutCirc');
        }
    });
});
});

/* Dump label
 */

function dumpLabel(label){
    $(label).fadeOut(1500).animate({
            'top': 2000
            }, {duration: 3000, queue: false}, function() {
            // Animation complete.
  });

}


/* Change div stacking order script by: www.jtricks.com
 * Version: 1.0 (20110615)
 * Latest version:
 * www.jtricks.com/javascript/blocks/ordering.html
 */
function getAbsoluteDivs()
{
    var arr = new Array();
    var all_divs = document.body.getElementsByTagName("DIV");
    var j = 0;

    for (i = 0; i < all_divs.length; i++)
    {
        if (all_divs.item(i).currentStyle)
            style = all_divs.item(i).currentStyle.position;
        else
            style = window.getComputedStyle(
                all_divs.item(i), null).position;

        if ('absolute' == style || 'relative' == style)
        {
            arr[j] = all_divs.item(i);
            j++;
        }
    }
    return arr;
}

function bringToFront(id)
{
    if (!document.getElementById ||
        !document.getElementsByTagName)
        return;

    var obj = document.getElementById(id);
    var divs = getAbsoluteDivs();
    var max_index = 0;
    var cur_index;

    // Compute the maximal z-index of
    // other absolute-positioned divs
    for (i = 0; i < divs.length; i++)
    {
        var item = divs[i];
        if (item == obj ||
            item.style.zIndex == '')
            continue;

        cur_index = parseInt(item.style.zIndex);
        if (max_index < cur_index)
        {
            max_index = cur_index;
        }
    }

    obj.style.zIndex = max_index + 1;
}

function sendToBack(id)
{
    if (!document.getElementById ||
        !document.getElementsByTagName)
        return;

    var obj = document.getElementById(id);
    var divs = getAbsoluteDivs();
    var min_index = 999999;
    var cur_index;

    if (divs.length < 2)
        return;

    // Compute the minimal z-index of
    // other absolute-positioned divs
    for (i = 0; i < divs.length; i++)
    {
        var item = divs[i];
        if (item == obj)
            continue;

        if (item.style.zIndex == '')
        {
            min_index = 0;
            break;
        }

        cur_index = parseInt(item.style.zIndex);
        if (min_index > cur_index)
        {
            min_index = cur_index;
        }

    }

    if (min_index > parseInt(obj.style.zIndex))
    {
        return;
    }

    obj.style.zIndex = 1;

    if (min_index > 1)
        return;

    var add = min_index == 0 ? 2 : 1;

    for (i = 0; i < divs.length; i++)
    {
        var item = divs[i];
        if (item == obj)
            continue;

        item.style.zIndex += add;
    }
}

Firefox中的z-index问题

0 个答案: