creating a "pop-up" mini page
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/
加载中,请稍侯......
精彩评论