使div像模态一样弹出

Question

我目前有一个由多行组成的布局，每行有4列。 每列包含显示一些基本信息的“卡片”。

当用户点击其中一张卡片时，我希望它能够制作一个翻转效果以显示其背面，其中包含更多详细信息，以及动画div以使其高于其他所有内容，居中且更大，以便我可以显示更多文本，一切都没有打破布局（作为一个Bootstrap模式将显示）。

翻转效果正在发挥作用，但我现在正在努力使div将其自身转换为模态，也就是居中并放大，而不缩放文本以便我可以在那里放入更多信息。

这是我的HTML代码：

<div class="row">
    <div class="col s12 m3 center-align flip-container">
        <div class="flipper">
            <div class="front">
                <div class="card-panel teal" style="position:relative;">
                    FRONT CARD TEXT
                </div>
            </div>
            <div class="back">
                BACK OF THE CARD WITH A LOT MORE TEXT, IMAGES AND STUFF
            </div>
        </div>
    </div>
</div>

任何帮助是极大的赞赏 ！

Answer 1

也许你想检查bootstrap，有模态。 否则，你需要一个看起来像模态的CSS，而jQuery只需要添加或删除一个类。