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

Question

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();
}

Answer 1

您必须引用定义了modal2的另一个模板{{> import}}（我的模板名称为import）。

Answer 2

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