打开多个模态 Materialise CSS

Question

我想知道是否可以使用 Materialize css 打开 2 个模式，其中只有一个处于活动状态。

示例如下：http://codepen.io/anon/pen/VKgYGP?editors=1010

<div class="row section">
    <div class="col">
        <!-- Modal Trigger -->
        <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
    </div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>Some texe...</p>
    </div>
    <div id="modal2" class="modal">
        <div class="modal-content">
            <h4>Modal 2 header</h4>
            <p>Another text...</p>
        </div>
    </div>
    <div class="modal-footer">
        <a href="#modal2" class="waves-effect waves-light btn modal-trigger">Modal2</a>
    </div>
</div>

你看，当你点击Modal 1里面的Modal 2按钮时，modal2就打开了。但是，模态 2 未激活。我的目标是在 Modal 2 中进行一些表单输入。

这可能吗？谢谢

Answer 1

您只是没有完全关闭 div 这就是模态无法正确显示的原因。仔细阅读以下代码可能会对您有所帮助。

HTML代码

<div class="row section">
    <div class="col">
        <!-- Modal Trigger -->
        <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
    </div>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>Some texe...</p>
    </div>
    <div class="modal-footer">
        <a href="#modal2" class="waves-effect waves-light btn modal-trigger">Modal 2</a>
    </div>
</div>
<div id="modal2" class="modal">
    <div class="modal-content">
        <h4>Modal 2  header</h4>
        <p>Another text...</p>
    </div>
</div>

打开多个模态 Materialise CSS

Opening multiple modals Materialize CSS

javascript

css

jquery

materialize