简单的 jQuery 弹出的例子
来源:互联网 发布:汇龙软件 编辑:程序博客网 时间:2024/05/17 04:34
In this tutorial, I'm going to share how to create a simple modal window with jQuery. I like jQuery, it makes everything so simple and so easy. In case you don't know what's modal window. You can click here. That's an example of a modal window.
In this website, I'm using facebox (inspiration from facebook). Others, such as lightbox, thickbox, multibox, litebox...... it's too many of them and they all are having different features.
Right, let's start, this example will show you how to create a modal window that will display the content of a DIV #ID.
My objectives are:
- Able to search the whole html document for A tag NAME="modal" attribute, so when users click on it, it will display the content of DIV #ID in the HREF attribute in Modal Window.
- A mask that will fill the whole screen.
- Modal windows that is simple and easy to modify.
1. HTML code and A tag attributes
<!-- #dialog is the id of a DIV defined in the code below -->
<
a
href
=
"#dialog"
name
=
"modal"
>Simple Modal Window</
a
>
<
div
id
=
"boxes"
>
<!-- #customize your modal window here -->
<
div
id
=
"dialog"
class
=
"window"
>
<
b
>Testing of Modal Window</
b
> |
<!-- close button is defined as close class -->
<
a
href
=
"#"
class
=
"close"
>Close it</
a
>
</
div
>
<!-- Do not remove div#mask, because you'll need it to fill the whole screen -->
<
div
id
=
"mask"
></
div
>
</
div
>
2. CSS code
<style>
/* Z-index of #mask must lower than #boxes .window */
#mask {
position
:
absolute
;
z-index
:
9000
;
background-color
:
#000
;
display
:
none
;
}
#boxes .window {
position
:
absolute
;
width
:
440px
;
height
:
200px
;
display
:
none
;
z-index
:
9999
;
padding
:
20px
;
}
/* Customize your modal window here, you can add background image too */
#boxes #dialog {
width
:
375px
;
height
:
203px
;
}
</style>
3. Javascript
<script>
$(document).ready(
function
() {
//select all the a tag with name equal to modal
$(
'a[name=modal]'
).click(
function
(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var
id = $(
this
).attr(
'href'
);
//Get the screen height and width
var
maskHeight = $(document).height();
var
maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$(
'#mask'
).css({
'width'
:maskWidth,
'height'
:maskHeight});
//transition effect
$(
'#mask'
).fadeIn(1000);
$(
'#mask'
).fadeTo(
"slow"
,0.8);
//Get the window height and width
var
winH = $(window).height();
var
winW = $(window).width();
//Set the popup window to center
$(id).css(
'top'
, winH/2-$(id).height()/2);
$(id).css(
'left'
, winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$(
'.window .close'
).click(
function
(e) {
//Cancel the link behavior
e.preventDefault();
$(
'#mask, .window'
).hide();
});
//if mask is clicked
$(
'#mask'
).click(
function
() {
$(
this
).hide();
$(
'.window'
).hide();
});
});
</script>
It's very straight forward and easy to understand. Remember, you need to include jQuery framework.
4. Launch modal window with Javascript
Due to popular demand :), I have an example for it. The concept is simple. I wrapped the modal window script inside a function, and then you will able to call the modal window using javascript function call.
Yes, you will able to load the modal window on page load as well :)
$(document).ready(
function
() {
//id is the ID for the DIV you want to display it as modal window
launchWindow(id);
});
Launch Modal Window with Javascript
And, if you want to close the modal window on key press, any keys you want, you can add the following function.
$(document).keyup(
function
(e) {
if
(e.keyCode == 13) {
$(
'#mask'
).hide();
$(
'.window'
).hide();
}
});
I think I should make another post about modal window. :)
5. Conclusion
Yes, that's all you need to make a simple jquery modal window. In this tutorial, it shown you the concept of how to display DIV content inside a modal window. However, you can further develop it to accept a link and display it in an iFrame and image gallery.
For those who's looking for a fully customizable Modal Window, you can try my method, if you have any other questions, please let me know. Thanks for reading.
Update
22-5-2009:- Added a new section "Activate modal window with Javascript"
16-4-2009:- If you prefer this article in Portuguese, please visit Simple jQuery Modal Window in Portuguese by Maujor
27 Mar 09: - Added e.preventDefault() to link to launch the modal window.
- Changed css position to fixed, so that the modal window also fixed to center.- Changed var winH = $(window).height(); to var winH = $(window).height();
24 Mar 09:
- Added e.preventDefault() to cancel the anchor link effect, we can also able to cancel it by removing the href attribute.
- Changed var winH = $(window).height(); to var winH = $(document).height();
AdvertisementSign up for online 646-364 training and become 1z0-051 certified in days! We also offer best quality comptia network+ with 100% exam pass guarantee.
- 简单的 jQuery 弹出的例子
- 简单的弹出页面例子
- jquery 简单的例子
- jQuery mouseover弹出title以及弹出大图的例子
- 简单的JQuery菜单例子
- jquery+ajax简单的例子
- 一个简单的JQuery弹出层类
- 简单的jQuery图片弹出插件popImage
- 简单的Jquery页面弹出框
- 非常简单好看的JQuery弹出层
- 很简单的jquery弹出对话框
- 一个简单的jquery+ajax的例子
- layer的弹出层的简单的例子
- JQuery插件-Layui弹出层的一个例子
- 用JQuery实现全选的简单例子
- jQuery最基础简单的例子
- jquery和js的几个简单例子
- jquery 实现简单的Ajax例子
- 25个jQuery的编程小抄
- 【转】[译] 富士F75EXR拍摄指南(适用于其它EXR系列相机)
- 格式化 数字
- 关于图像绘制并输出的问题,大家帮忙看看
- C语言的模块化设计和面向对象编程
- 简单的 jQuery 弹出的例子
- Nextday函数的简单实现
- linux下的进程间通讯
- to be ruled from Windows Space about C++
- 开通了博客 希望大家支持
- Restore gnome top panel
- JabRef中文显示小方块的解决
- quartus10.1的licence求助
- 河北移动(动感地带卡)如何修改亲情号