打開多個模態實現CSS

Question

我想知道是否可以使用Materialize css打開兩個模式，其中只有一個模式處於活動狀態。

這裏是例子：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> 

你看，當你在模態2按鈕點擊模態1的內部，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>