2016-10-22 7 views
0

Materialize CSSを使用して2つのモーダルをアクティブにすることが可能かどうかを知りたいと思います。ここで複数のモーダルを開く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> 

あなたはmodal2が開かれたモーダル1、内部のモーダル2ボタンをクリックしたときには、参照してください。ただし、モーダル2はアクティブではありません。 私の目標は、モーダル2でフォーム入力を行うことです。

このようなことは可能ですか? ありがとう

答えて

2

あなたは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> 
+0

!ありがとうたくさん:) – marek

+0

その私の喜び:)。 @marek –

関連する問題