Javascript 创建一个；弹出窗口；迷你页 问题

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

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

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

---

提前谢谢

查看jQuery和FancyBox。我想这就够了

我喜欢

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

由于它获取目标页面的HTML并将其直接插入到文档中，因此如果URL指向完整的HTML页面，它的行为可能会异常。如果URL只指向HTML片段（无

或

标记），则效果最好

---

也可能对您有用。

在

iframe

中显示页面是否可以，或者是否希望将内容直接插入并包含在主页中？此外，是否需要在所有浏览器中都可以使用？由于IE做了一些不同的事情，如果需要支持，代码会更混乱。@Jeremy我不喜欢使用iframe，但如果其他选项变得复杂，我可能不得不使用它。我希望溢出由

overflow:scroll

属性处理。至于IE，目前它不需要支持它，但如果我将来需要支持它，如果你能为我指出正确的方向，那将是非常有用的。谢谢你的时间^ ^我现在就从类似的东西开始。我可以稍后关掉iframe。如果没有时间，你不必给我iframeless版本的代码。给我一个大概的描述你会怎么做。谢谢我已经将其更新为在没有AJAX的情况下工作。我希望这对你有用。：）没有

iframe

s，我的意思是；使用AJAX。

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");