Home/ Questions/Q 4575422
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T20:03:41+00:00

Issue I’m planning on making a lightbox-like project page. I want to have it

  • 0

Issue

I’m planning on making a lightbox-like project page. I want to have it where the user clicks on an image and it brings up a div that contains a article with paragraphs, images, and whatever else I want to put in it. It will basically be a scrollable article that hovers over the original page which the user can close to see the project page again. I’d prefer to not force the user to download every article when they enter the gallery page.

Request

Is there a way to pull a small article like this from say, an html file stored on the server? Is there a better way to approach this problem?

-edit- I’d prefer to not use jQuery or any other javascript library. This website will be presented to a Javascript course, so I would like it all to be normal javascript code. Besides, I’d would rather learn how jQuery does it than use use it blindly.

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a simple lightbox in pure JavaScript, loading its content from a specified URL. It doesn’t handle errors gracefully and if it works in IE, it’s only in newer versions.

    Since it is taking the HTML of the target page and inserting it into your document directly, it might behave oddly if the URL points to a complete HTML page. It would work best if the URL only points to an HTML snippet (no <html> or <body> tags).

    var lightboxPage = function(path) {
  // fetches content from a specified path and displays it in a lightbox

  var backdrop = document.createElement("div");
  var content = document.createElement("div");

  content.innerText = "Loading...";

  // use AJAX to load the content from the page
  var request = new XMLHttpRequest();

  request.open("GET", path, false);

  var handleAjaxEvent = function() {
    // this function is called multiple times during the AJAX request.
    // a state of 4 means that the request has completed.
    if (request.readyState == 4) {
        content.innerHTML = request.responseText;
    }
  }

  request.onreadystatechange = handleAjaxEvent;
  request.send();

  backdrop.style.position = "fixed";
  backdrop.style.top = 0;
  backdrop.style.height = "100%";
  backdrop.style.left = 0;
  backdrop.style.width = "100%";
  backdrop.style.zIndex = 500;
  backdrop.style.background = "black";
  backdrop.style.opacity = 0.8;

  content.style.position = "fixed";
  content.style.top = "10%";
  content.style.height = "80%";
  content.style.left = "10%";
  content.style.width = "80%";
  content.style.zIndex = 600;
  content.style.border = "none";
  content.style.overflow = "auto";
  content.style.background = "white";

  document.body.appendChild(backdrop);
  document.body.appendChild(content);

  var removeLightbox = function() {
    document.body.removeChild(backdrop);
    document.body.removeChild(content);
  }

  // remove the lightbox when people click on the backdrop
  backdrop.addEventListener("click", removeLightbox)
};

// example usage
lightboxPage("test.html");

    Mozilla’s AJAX tutorial may be of use to you as well.

    • 0