modular JavaScript to call modal window

Question

I'm using a plugin in pure JavaScript. Here's a syntax for creating one modal window.

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

In all, I need to create 8 modal windows, it was achieved with the following code I've written myself:

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 (for 8 list elements in all)

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

The problem above is solved but since I'm not a very experienced in JavaScript, I'm looking forward to getting a feedback or even a suggestion on how to improve my code.

modular JavaScript to call modal window

0 Answers0