var $cont = document.querySelector(".cont");
var $elsArr = [].slice.call(document.querySelectorAll(".el"));
var $closeBtnsArr = [].slice.call(document.querySelectorAll(".el__close-btn"));
setTimeout(function () {
$cont.classList.remove("s--inactive");
}, 0);
$elsArr.forEach(function ($el) {
$el.addEventListener("click", function () {
if (this.classList.contains("s--active")) return;
$cont.classList.add("s--el-active");
this.classList.add("s--active");
});
});
$closeBtnsArr.forEach(function ($btn) {
$btn.addEventListener("click", function (e) {
e.stopPropagation();
20
$cont.classList.remove("s--el-active");
document.querySelector(".el.s--active").classList.remove("s--active");
});
});
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter