MDL 모달 버튼은 다른 카드가 아닌 한 카드에서만 작동합니다.

Question

이것은 비취로 작성된 페이지입니다. 이벤트의 각 값에 대한 카드를 생성합니다 (변수). 의도는 이벤트 정보를 표시하는 데 사용될 각 카드에 대한 모달을 만드는 것입니다. 모달 버튼은 첫 번째 카드에서 작동합니다. 나머지 카드는 작동하지 않습니다.

.mdl-grid 
    each val in pdfs 
     .mdl-cell.mdl-cell--4-col.mdl-cell--4-offset 
      .demo-card-square.mdl-card.mdl-shadow--2dp 
       .mdl-card__title 
        h2.mdl-card__title-text #{val.title} 
       .mdl-card__supporting-text 
        | #{val.desc} 
       .mdl-card__actions.mdl-card--border 
        a.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect(href="/uploads/"+'#{val.filename}',id='embedUrl' target="_blank") 
         | View Event 
        button.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect.mdl-button.show-modal(type='button') 
         | Review 
        // Icon button 
        a.mdl-button.mdl-js-button.mdl-button--icon.mdl-button-color--red 
         i.material-icons close 

        dialog.Viewabstractmodal.mdl-dialog 
         .mdl-dialog__content 

         .mdl-dialog__actions.mdl-dialog__actions 
          button.mdl-button.close.mdl-button--colored(type='button') Submit 
script. 
    var dialog = document.querySelector('dialog'); 
    var showModalButton = document.querySelector('.show-modal'); 
    if (! dialog.showModal) { 
     dialogPolyfill.registerDialog(dialog); 
    } 
    showModalButton.addEventListener('click', function() { 
     dialog.showModal(); 
    }); 
    dialog.querySelector('.close').addEventListener('click', function() { 
     dialog.close(); 
    }); 

Answer 1

첫 번째 이벤트뿐만 아니라 각 대화 상자에 이벤트 리스너를 할당해야합니다.

// get ALL of the dialogs 
var dialogs = document.querySelectorAll('.dialog'); 

// iterate and add listeners to each dialog 
dialogs.forEach(function(dialog){ 
    // ... polyfill 

    // use querySelector method of dialog, not the whole document 
    var showModalButton = dialog.querySelector('.show-modal'); 

    showModalButton.addEventListener('click', function() { 
     dialog.showModal(); 
    }); 
    dialog.querySelector('.close').addEventListener('click', function() { 
     dialog.close(); 
    }); 
})