modal pop up html css

1	
2    <button class="trigger">Click here to trigger the modal!</button>
3    <div class="modal">
4        <div class="modal-content">
5            <span class="close-button">×</span>
6            <h1>Hello, I am a modal!</h1>
7        </div>
8    </div>
9	
10

1	
2    var modal = document.querySelector(".modal");
3    var trigger = document.querySelector(".trigger");
4    var closeButton = document.querySelector(".close-button");
5
6    function toggleModal() {
7        modal.classList.toggle("show-modal");
8    }
9
10    function windowOnClick(event) {
11        if (event.target === modal) {
12            toggleModal();
13        }
14    }
15
16    trigger.addEventListener("click", toggleModal);
17    closeButton.addEventListener("click", toggleModal);
18    window.addEventListener("click", windowOnClick);
19	
20