<h1 id="4f66a3b5-0c1b-4944-8848-15e4a3ba8e4f" data-toc-id="4f66a3b5-0c1b-4944-8848-15e4a3ba8e4f" style="font-size: 32px; font-weight: 600; line-height: 1.2;"><strong>Copy and paste this JavaScript to your custom JS</strong></h1><pre><code>// ======================= Global image popup ======================= // 1. Inject CSS const style = document.createElement("style"); style.textContent = ` .js-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 9999; } .js-popup-overlay img { max-width: 90%; max-height: 90%; border-radius: 6px; } .js-popup-close { position: absolute; top: 20px; right: 30px; font-size: 32px; color: #fff; cursor: pointer; user-select: none; } `; document.head.appendChild(style); // 2. Create popup elements const overlay = document.createElement("div"); overlay.className = "js-popup-overlay"; const popupImg = document.createElement("img"); const closeBtn = document.createElement("span"); closeBtn.className = "js-popup-close"; closeBtn.innerHTML = "×"; overlay.appendChild(closeBtn); overlay.appendChild(popupImg); document.body.appendChild(overlay); // 3. Attach popup only to large images document.querySelectorAll("img").forEach((img) =&gt; { img.addEventListener("load", () =&gt; { if ( img.naturalWidth &lt; 120 || img.naturalHeight &lt; 120 || img.getBoundingClientRect().width &lt; 120 || img.getBoundingClientRect().height &lt; 120 ) return; img.style.cursor = "zoom-in"; img.addEventListener("click", () =&gt; { popupImg.src = img.src; overlay.style.display = "flex"; }); }); // handle cached images if (img.complete) img.dispatchEvent(new Event("load")); }); // 4. Close handlers const closePopup = () =&gt; { overlay.style.display = "none"; popupImg.src = ""; }; closeBtn.addEventListener("click", closePopup); overlay.addEventListener("click", (e) =&gt; { if (e.target === overlay) closePopup(); }); document.addEventListener("keydown", (e) =&gt; { if (e.key === "Escape") closePopup(); }); // ======================= End Global image popup =======================</code></pre>

How to make global image popup with custom js code in the Ezycourse.

How to make global image popup?

Copy and paste this JavaScript to your custom JS

Read articles, tips, and resources to help you learn, grow, and succeed. Explore our latest posts covering education, community, and personal growth

Blog – Insights, Tips & Resources for Learning and Growth

Explore articles, tips, and insights to help you succeed in learning, community building, and personal development.

Blog – Learn, Grow & Get Inspired

English

Arabic

{"default":"<p>I agree with the <strong>terms and coditions</strong></p>"}

Inter

Ultra

Holtwood One SC

Black Han Sans

Pacifico

Satisfy

Kalam

Cookie

Playfair Display

PT Sans

Lilita One

Lobster

Bevan

Archivo Black

Oswald

Open Sans

Figtree

Bebas Neue

Lato

Plus Jakarta Sans

Anton

Cormorant Garamond

Bodoni Moda

Raleway

Roboto

Roboto Serif

Montserrat

Siraman

Inter Tight

Li Shadhinata2 2

Lexicon

RuntimeRegular-m2Odx

FloralpersonaluseBold-K7

RichardRegular

How old are you?

Are you boy?

Dashboard

Courses

Coaching Programs

Profile

Memberships

Bundle Courses

Communities

Groups

Digital Products

Physical Products

Live Products

Video Library

Audio Library

Events

Appointments

Premium Pages

Certificates

Badges

Order History

Coin History

Organization Orders

Subscription

Affiliate Dashboard

Settings

Billing

musaddek

Primary Menu

System Defaults

Primary color

Primary color hover

Heading text color

Body text color

Banner text color

Primary button text color

Primary button text hover color

Secondary button background color

Secondary button background hover color

Secondary button text color

Secondary button text hover color

Navbar item background color

Navbar item text color

Navbar item text hover color

How to make global image popup?

How to make global image popup?

Related Posts

How to remove global notification permission with CSS?

How to make student dashboard dark mode?