Question

我想知道是否可以使用Materialise 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未激活。我的目标是在模态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>

打开多个模态实现CSS

1 个答案: