javascript - 打开多个模态 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>