marek marek - 1 month ago 28
CSS Question

Opening multiple modals Materialize CSS

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 the Modal 2.

Is such a thing possible?
Thanks

Answer

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>