JSFiddle - React, Tailwind, and code Playground

by essoduke chang

HTML

<div class="overlay">
    <div class="popup">
        <img src="http://placehold.it/300x300" alt="300x300" />
    </div>
</div>

<p>Lorem ipsum dolor sit amet consectetuer lobortis morbi vel laoreet Duis. Gravida non ridiculus ac nascetur vel pulvinar libero leo nulla Vestibulum. Nunc metus id semper consectetuer euismod lorem lacus quam ac nibh. Tincidunt aliquam accumsan quam neque fermentum laoreet parturient Vestibulum enim diam. Phasellus pellentesque sed sed sed tincidunt.</p>

CSS

.popup {
    width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -200px 0 0 -150px;
    z-index: 1001;
}
.overlay {
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
}

JavaScript

(function () {

    var overlay = $('.overlay');

    // 計時 3000ms 隱藏 popup
    window.setInterval(function () {
        overlay.hide();
    }, 3000);

    // .popup click 事件
    $(overlay).on('click.popup', function () {
        overlay.hide();
    });

}());