CODEWITHSUNDEEP
javascriptmeteormaterialize
Nishi Gaba
Nishi Gaba

Reputation: 661

Open more than one materialize modal on same page in meteor js

id of 1st modal is "modal1" and 2nd modal id is "modal2"

HTML code ->

1st Modal Call on Same Page

<div class="input-field col s12 m6 left-align">
                <button class="btn waves-effect waves-light modal-trigger importButton" style="height:45px !important">Import Data
                    <i class="material-icons right">import_export</i>
                </button>
</div>

2nd Modal Call on Same Page

<div class="modal-trigger" style="cursor: pointer;">
                <img src="abc.png" alt="" class="circle">
</div>

JS Code ->

'click .modal-trigger': function(event) {
    event.preventDefault();
    $('#modal1').openModal();
},
'click .importButton':function(event) {
     event.preventDefault();
    $('#modal2').openModal();
}

Upvotes: 1

Views: 1003

Answers (2)

blueren
blueren

Reputation: 2860

Your question is not very clear. From what I understand, there are 2 modals that can be opened from the same template. The catch here is that bootstrap does not support multiple modals stacking up over each other.

Multiple open modals not supported Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

So, before the first modal is open, you must first always check if the other modal is in closed state, and similarly, before the second modal is open, you must check if the first modal is closed, if not then close it.

There is one package in meteor that appears to help handle multiple modals. you can check out peppelg:bootstrap-3-modal to get a better implementation of bootstrap modals in meteor. Specifically the part where they mention the use of below:

Modal.allowMultiple = true

Upvotes: 0

Nishi Gaba
Nishi Gaba

Reputation: 661

You have to give refrence of another template {{>import}} (my template name is import) in which my modal2 is defined.

Upvotes: 2

Related Questions