模块化JavaScript调用模态窗口

Question

我在纯JavaScript中使用插件。 这是创建一个模态窗口的语法。

var modalContent = new tingle.modal();
var btn = document.querySelector('.trigger-button-1');
var modalWindow = document.querySelector('.project1-modal');

btn.addEventListener('click', function () {
   modalContent.open();
});
modalContent.setContent(modalWindow.innerHTML);

总而言之，我需要创建8个模态窗口，它是通过我自己编写的以下代码实现的：

myModalContent = new tingle.modal();
var myBtn = document.querySelectorAll('button.project__btn');
for (var i = 0; i < myBtn.length; i++){
myBtn[i].addEventListener("click", function(){
    myModalContent.open();
    // check if a btn has an attribute
    if (this.hasAttribute('data-btn')) {
        myModalContent.setContent(document.querySelector('.project' + this.getAttribute("data-btn") + '-modal').innerHTML);
    // otherwise set it to display only the project 1 modal window
    } else {
        myModalContent.setContent(document.querySelector('.project1-modal').innerHTML);            
    }
});

}

HTML（总共8个列表元素）

<li class="project">
    ...
    <button type="button" class="project__btn" data-btn="1">More</button>
    <div class="project4-modal">
       ...
    </div>
</li>

上面的问题已经解决，但由于我不是一个非常有经验的JavaScript，我期待收到反馈，甚至建议如何改进我的代码。