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

creating a "pop-up" mini page

本文关键字：窗口 一个 创建      更新时间：2023-09-26

问题

我正计划制作一个类似灯箱的项目页面。我想让它出现在用户点击图像的地方，它会显示一个div，其中包含一篇文章，其中包含段落、图像和我想放在其中的任何其他内容。它基本上是一篇可滚动的文章，悬停在原始页面上，用户可以关闭它来再次查看项目页面。我不想强迫用户在进入图库页面时下载每一篇文章。

请求

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

-edit-我不想使用jQuery或任何其他javascript库。这个网站将提供一个Javascript课程，所以我希望它都是普通的Javascript代码。此外，我宁愿学习jQuery是如何做到这一点的，也不愿盲目地使用它。

提前感谢！

这里有一个纯JavaScript的简单灯箱，从指定的URL加载其内容。它不能很好地处理错误，如果它在IE中工作，它只在更新的版本中工作。

由于它将目标页面的HTML直接插入到文档中，因此如果URL指向一个完整的HTML页面，它的行为可能会很奇怪。如果URL只指向一个HTML片段(没有<html>或<body>标记(，效果最好。

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

查看jQuery和FancyBox。我想这就涵盖了。http://fancybox.net/

我喜欢http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

相关文章：