создание всплывающей мини-страницы - PullRequest
Новая
       19

создание всплывающей мини-страницы

2 голосов
/ 01 мая 2011

Выпуск

Я планирую сделать страницу проекта в стиле лайтбокса. Я хочу иметь его там, где пользователь нажимает на изображение, и оно вызывает div, который содержит статью с абзацами, изображениями и всем остальным, что я хочу добавить в него. В основном это будет прокручиваемая статья, которая парит над исходной страницей, которую пользователь может закрыть, чтобы снова увидеть страницу проекта. Я бы предпочел не заставлять пользователя загружать каждую статью при входе на страницу галереи.

Запрос

Есть ли способ извлечь небольшую статью вроде этого, скажем, из файла html, хранящегося на сервере? Есть ли лучший способ решить эту проблему?

-edit- Я бы предпочел не использовать jQuery или любую другую библиотеку javascript. Этот веб-сайт будет представлен на курсе Javascript, поэтому я бы хотел, чтобы все это было нормальным кодом Javascript. Кроме того, я бы лучше узнал, как это делает jQuery, чем использовал бы его вслепую.

Заранее спасибо!

Ответы [ 3 ]

1 голос
/ 01 мая 2011

Вот простой лайтбокс в чистом 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 также может пригодиться вам.

0 голосов
/ 01 мая 2011
0 голосов
/ 01 мая 2011

Проверьте jQuery и FancyBox. Я думаю, что это покрыло бы это. http://fancybox.net/

...