creating a "pop-up" mini page_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-01 15:18 出处：网络

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 els

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 i开发者_如何学编程n 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!

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.

Check out jQuery and FancyBox. I think that would cover it. http://fancybox.net/

i like http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/