模态弹出窗口闪烁到屏幕的一侧。我怎样才能解决这个问题？

Question

我构建了一个表格来计算输入到信用卡奖励表格字段中的数字。该表单利用模态弹出窗口与用户交流结果。

问题是，当模态框被激活和关闭时，所有模态框都会瞬间闪烁到屏幕右侧。我不确定需要更改哪些内容才能使它们在 100% 的时间内出现在屏幕中央。

我需要更改什么才能使其正常工作？

Answer 1

你可以用这个替换你的动画关键帧

@-webkit-keyframes popperIn {
    0% {
        opacity: 0;
        -webkit-transform:translate(-50%, -50%) scale(1.06);
    }

    40% {
        opacity: 1;
    }

    100% {
        -webkit-transform:translate(-50%, -50%) scale(1);
    }
}

@-moz-keyframes popperIn {
    0% {
        opacity: 0;
        -moz-transform:translate(-50%, -50%) scale(1.06);
    }

    40% {
        opacity: 1;
    }

    100% {
        -moz-transform:translate(-50%, -50%) scale(1);
    }
}

@keyframes popperIn {
    0% {
        opacity: 0;
        transform:translate(-50%, -50%) scale(1.06);
    }

    40% {
        opacity: 1;
    }

    100% {
        transform:translate(-50%, -50%) scale(1);
    }
}

@-webkit-keyframes popperOut {
    0% {
        opacity: 1;
        -webkit-transform:translate(-50%, -50%) scale(1);
    }

    30% {
        opacity: 1;
    }

    40% {
        -webkit-transform:translate(-50%, -50%) scale(1.05);
    }

    100% {
        opacity: 0;
        -webkit-transform:translate(-50%, -50%) scale(1.15);
    }
}

@-moz-keyframes popperOut {
    0% {
        opacity: 1;
        -moz-transform:translate(-50%, -50%) scale(1);
    }

    30% {
        opacity: 1;
    }

    40% {
        -moz-transform:translate(-50%, -50%) scale(1.05);
    }

    100% {
        opacity: 0;
        -moz-transform:translate(-50%, -50%) scale(1.15);
    }
}

@keyframes popperOut {
    0% {
        opacity: 1;
        transform:translate(-50%, -50%) scale(1);
    }

    30% {
        opacity: 1;
    }

    40% {
        transform:translate(-50%, -50%) scale(1.05);
    }

    100% {
        opacity: 0;
        transform:translate(-50%, -50%) scale(1.15);
    }
}

它会非常有效

模态弹出窗口闪烁到屏幕的一侧。我怎样才能解决这个问题？

Modal pop-ups flashing to the side of the screen. How can I fix this?

html

javascript

css

forms

modal-dialog