Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
const $lb = $("<div>").attr("id","lightbox").html("<img id='lb-img'><button id='lb-close'>×</button>").appendTo("body").hide(); $(".gallery img").on("click", function() { $("#lb-img").attr("src", $(this).data("full") || this.src); $lb.fadeIn(200); $("body").css("overflow","hidden"); }); $("#lb-close, #lightbox").on("click", function(e) { if (e.target === this) { $lb.fadeOut(200); $("body").css("overflow",""); } }); $(document).on("keydown", e => { if (e.key === "Escape") $("#lb-close").trigger("click"); });
Result
Open