[转]Create a Lightbox with jQuery and CSS 创建一个简单的弹出层
2012-04-25 15:58
801 查看
The “lightbox” is a unique and useful design tool when used properly. It allows designers to present information that is totally independent from the site theme, and it is especially useful when displaying information that is loaded via AJAX requests (often negating the need for additional post-backs on your pages). There are countless ways to implement lightbox functionality into your site, and almost every option I’ve ever seen is weighed down by extraneous functionality or useless transition animations. It’s quite easy to create your own lightboxes with minimal effort. This tutorial can serve as a quick and easy template to get you started.
What we just did: we established two styles. One style is for the lightbox that actually appears on the page (
Now, in an attached
Remember, clicking anywhere on the “shadow”
Similarly, you can insert HTML (or even a jQuery DOM object) into the lightbox. Like so:
Finally, you can even use this simple lightbox function to insert AJAX content. Please keep in mind that my JavaScript function simply inserts the entire result into the
Let’s load some AJAX content: Load the CSS file for this tutorial into a lightbox
If you’re on a fast connection, you may not notice, but the AJAX link actually reads “Loading…” in the lightbox a split-second before the content actually appears. This can be useful to give users feedback while the AJAX request is processing. Please note that I’ve added a bit of styling to my demo (namely padding on the lightbox to make it appear less cluttered).
To help you get started, you can download the CSS and JavaScript referenced in this tutorial here:
lightbox.css
lightbox.js
Good luck, and happy styling!
The CSS Style
There are two elements you’ll have to implement into your design in order to create a lightbox — CSS and Javascript. We’ll take care of the CSS style first, as it’s the most simple to implement. On your page or in an attached style sheet, add the following CSS styles:#lightbox { position: absolute; top: 0; left: 50%; width: 500px; margin-left: -250px; background: #fff; z-index: 1001; display: none; } #lightbox-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; filter: alpha(opacity=75); -moz-opacity: 0.75; -khtml-opacity: 0.75; opacity: 0.75; z-index: 1000; display: none; }
What we just did: we established two styles. One style is for the lightbox that actually appears on the page (
#lightbox). The second style is for lightbox background (
#lightbox-shadow). We have made this background dark and semi-transparent in order to dim the site’s content as it appears behind the lightbox.
The jQuery Script
The real work is done via our simple jQuery script. We have two JavaScript functions that will handle displaying and hiding our lightbox. First, make sure you have attached the jQuery library to your page:<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Now, in an attached
.jsfile, add the following script code.
/**************************************** Barebones Lightbox Template by Kyle Schaeffer kyleschaeffer.com * requires jQuery ****************************************/ // display the lightbox function lightbox(insertContent, ajaxContentUrl){ // add lightbox/shadow <div/>'s if not previously added if($('#lightbox').size() == 0){ var theLightbox = $('<div id="lightbox"/>'); var theShadow = $('<div id="lightbox-shadow"/>'); $(theShadow).click(function(e){ closeLightbox(); }); $('body').append(theShadow); $('body').append(theLightbox); } // remove any previously added content $('#lightbox').empty(); // insert HTML content if(insertContent != null){ $('#lightbox').append(insertContent); } // insert AJAX content if(ajaxContentUrl != null){ // temporarily add a "Loading..." message in the lightbox $('#lightbox').append('<p class="loading">Loading...</p>'); // request AJAX content $.ajax({ type: 'GET', url: ajaxContentUrl, success:function(data){ // remove "Loading..." message and append AJAX content $('#lightbox').empty(); $('#lightbox').append(data); }, error:function(){ alert('AJAX Failure!'); } }); } // move the lightbox to the current window top + 100px $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px'); // display the lightbox $('#lightbox').show(); $('#lightbox-shadow').show(); } // close the lightbox function closeLightbox(){ // hide lightbox and shadow <div/>'s $('#lightbox').hide(); $('#lightbox-shadow').hide(); // remove contents of lightbox in case a video or other content is actively playing $('#lightbox').empty(); }
Ready for Lightboxing
Once you have the CSS and script into place, you can call your newlightbox();function from anywhere within your design. It’s as easy as calling the lightbox from an
anchortag:
<a href="javascript:lightbox('Hello!');">Show me the lightbox</a>
Remember, clicking anywhere on the “shadow”
<div/>will hide the lightbox — you could easily add a “close” button to your lightbox by connecting it to the
closeLightbox();JavaScript function.
Similarly, you can insert HTML (or even a jQuery DOM object) into the lightbox. Like so:
<a href="javascript:lightbox('<p><strong>Rich</strong> content works too!</p>');">Show me the lightbox</a>
Finally, you can even use this simple lightbox function to insert AJAX content. Please keep in mind that my JavaScript function simply inserts the entire result into the
#lightboxelement — if you’re trying to request a website or HTML page, you’ll probably have to remove the
<html/>and
<body/>tags before inserting content into your lightbox window, else the lightbox would simply disappear. An AJAX lightbox request looks a little like this:
<a href="javascript:lightbox(null, 'http://foo.com/readme.txt');">Show me the lightbox</a>
The Demo
Try it out: Show me the lightboxLet’s load some AJAX content: Load the CSS file for this tutorial into a lightbox
If you’re on a fast connection, you may not notice, but the AJAX link actually reads “Loading…” in the lightbox a split-second before the content actually appears. This can be useful to give users feedback while the AJAX request is processing. Please note that I’ve added a bit of styling to my demo (namely padding on the lightbox to make it appear less cluttered).
Make it Shine
You’ll probably want to modify the CSS and other elements of this lightbox in order to suit your site’s design and style. If you’re working with a lot of AJAX content, you may want to even replace the temporaryloadingelement with an animated spinner image, or something of the like.
To help you get started, you can download the CSS and JavaScript referenced in this tutorial here:
lightbox.css
lightbox.js
Good luck, and happy styling!
相关文章推荐
- 使用 ADD-ON SDK 开发 基于 Html JQuery 和 CSS 的 firefox 插件入门教程1: 创建一个简单的 Add-on
- 怎么创建一个基本的jQuery插件 - How to Create a Basic Plugin
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
- 用html+css+jQuery实现的一个简单的图片切换特效
- 通过ASP.NET Web API + JQuery创建一个简单的Web应用
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第一章:创建基本的MVC Web站点
- 简单的问题,用类创建一个对象error C2380: type(s) preceding 'Complex' (constructor with return type, or illegal redefinition of current class-n
- 创建一个简单的device_create_file文件节点
- 利用HTML5与jQuery技术创建一个简单的自动表单完成
- 使用PHP创建一个REST API(Create a REST API with PHP)
- 一个简单的dropdown(CSS+jquery)
- 使用PHP创建一个REST API(Create a REST API with PHP)
- 如何创建一个Plain TableView With Section And Index
- 使用PHP创建一个REST API(Create a REST API with PHP)
- CSS学习之创建一个简单的导航栏下拉菜单
- 通过ASP.NET Web API + JQuery创建一个简单的Web应用
- JQuery Lightbox -- "一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本"
- 用HTML5 & jQuery创建一个简单的自动填充(autocomplete)
- 一个简单的以User权限启动外部应用程序(用NetUserAdd函数和USER_INFO_1结构体动态添加用户,然后用CreateProcessWithLogonW启动程序)good
- 使用PHP创建一个REST API(Create a REST API with PHP) 节选1