创建“弹出窗口”迷你页面

发布于 2024-11-04 10:57:35 字数 378 浏览 3 评论 0原文

问题

我计划制作一个类似灯箱的项目页面。我希望用户单击图像时会弹出一个 div，其中包含一篇带有段落、图像以及我想放入其中的其他内容的文章。它基本上是一篇可滚动的文章，悬停在原始页面上，用户可以关闭该文章以再次查看项目页面。我不想强迫用户在进入图库页面时下载每篇文章。

请求

有没有办法从服务器上存储的 html 文件中提取这样的小文章？有没有更好的方法来解决这个问题？

-edit- 我不想使用 jQuery 或任何其他 javascript 库。这个网站将呈现给 JavaScript 课程，所以我希望这一切都是正常的 JavaScript 代码。此外，我宁愿学习 jQuery 是如何做的，也不愿盲目地使用它。

提前致谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

素染倾城色 2024-11-11 10:57:35

这是一个用纯 JavaScript 编写的简单灯箱，从指定的 URL 加载其内容。它不能优雅地处理错误，如果它可以在 IE 中运行，也只能在较新的版本中运行。

由于它获取目标页面的 HTML 并将其直接插入到文档中，因此如果 URL 指向完整的 HTML 页面，它的行为可能会很奇怪。如果 URL 仅指向 HTML 片段（没有或标记），效果最佳。

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 的 AJAX 教程可能对您也有用。

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 原文