javascript - 使 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 仅添加或删除一个类。