CSS关键帧动画效果div的模型window

Question

我必须将动画添加到固定位置 DIV，其中包含模态 window。

没有动画css指令（animation:navslide .5s ease forwards;），模态window按预期工作，占据了整个屏幕。但是，对于 css 动画，模态 window 显示在固定位置 DIV.

内

为什么模态 window 会这样？ DIV 有什么方法可以制作动画，而不会干扰模态 window 在页面中的定位？

Answer 1

首先，为什么 header 元素中有模态 - 这是错误的。通常最好将模式元素放在 body 或其他根元素中。您的演示已修复。

<div class="wrap">

<div class="topHeader">

    <button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>


</div>
<div id="id01" class="modal">
    <div class="modal-content">
        <span onclick="document.getElementById('id01').style.display='none'" class="close">close</span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum sagittis ipsum, vitae
            ultrices libero blandit at. Curabitur blandit porta turpis, eu tincidunt tortor ultrices ac. </p>
    </div>
</div>

<div class="pagecontent">
    <h1>A title</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum sagittis ipsum, vitae ultrices
        libero blandit at. Curabitur blandit porta turpis, eu tincidunt tortor ultrices ac. Phasellus tempus risus
        molestie, porttitor odio eget, varius mi. Nullam rutrum, justo eu sollicitudin gravida, enim quam
        scelerisque enim, id pharetra orci lectus nec magna. Sed imperdiet tortor ex, id pulvinar nulla tincidunt
        vitae. Duis commodo aliquam mi, id pretium eros ornare vitae. Praesent ac nunc eget nisl mattis consectetur
        nec quis orci. Etiam elit nunc, molestie et tortor ac, tristique aliquet metus.</p>
</div>

但是，如果您想将模式保留在 header 中，我帮不了您，因为 header 中存在一些溢出冲突，因为翻译。

CSS关键帧动画效果div的模型window

CSS keyframe animation affects div's modal window

css

animation

modal-dialog

keyframe