Question

我目前有一个由多行组成的布局，每行有4列。每列包含一张＆＃34;卡＆＃34;显示一些基本信息。

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

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

这是我的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只需要添加或删除一个类。

使div像模态一样弹出

1 个答案: