Opening multiple modals Materialize CSS

Question

I would like to know if it is possible to have opened 2 modals, from which one only one is active, using Materialize css.

Here is example: 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>

You see, when you click on the Modal 2 button inside of Modal 1, modal2 is opened. However, Modal 2 is not active. My goal is to have some form inputs in Modal 2.

Is such a thing possible? Thanks

Answer 1

You just not closed div perfectly that's why modal not shows properly. Go through below code may be it can help you.

HTML Code

<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>