Modal pop up html css

	
    <button class="trigger">Click here to trigger the modal!</button>
    <div class="modal">
        <div class="modal-content">
            <span class="close-button">×</span>
            <h1>Hello, I am a modal!</h1>
        </div>
    </div>

Source: sabe.io

Modal pop up html css

	
    var modal = document.querySelector(".modal");
    var trigger = document.querySelector(".trigger");
    var closeButton = document.querySelector(".close-button");

    function toggleModal() {
        modal.classList.toggle("show-modal");
    }

    function windowOnClick(event) {
        if (event.target === modal) {
            toggleModal();
        }
    }

    trigger.addEventListener("click", toggleModal);
    closeButton.addEventListener("click", toggleModal);
    window.addEventListener("click", windowOnClick);

Source: sabe.io

Similar codes

-2 votes153 views1 answer
How to add pseudo class in html
CSS
0 vote216 views1 answer
Are the iphone dimensions widht then height
CSS
24 votes156 views6 answers
Background remover
CSS
2 votes170 views3 answers
How to make a html css js editor
CSS
1 vote152 views1 answer
How to change color of element when hovering over div
CSS
17 votes153 views3 answers
Css odd even child
CSS
10 votes182 views2 answers
Css list items next to each other
CSS
0 vote149 views1 answer
How to disable margin collapse between parent and child
CSS
7 votes155 views3 answers
Circle button css
CSS
0 vote160 views2 answers
Increase space between dashed border css
CSS