使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显 示它们。这种效果不仅能够充分利用有限的版面空间,而且能够提高用户体验;更重要的是,它并不影响SEO效果(因为它实际存在于页面中,只是初始为不可见 状态)。
什么是jQuery?
引用jQuery作者的话说,jQuery是一个快速简洁的用于简化HTML文档的事件处理、动画效果、AJax交互的快速稳定的JavaScript类 库。一句话就是,jQuery做好了所有底层的东西,我们只需要短短几行代码,就可以完成原来可能需要几十行JS代码才能完成的功能。
第一步:我们将要做什么?
一图抵千言。让我们看看这个DIV弹出窗口的效果截图:
看到了吗?我们制作了一个非常简单的网页,里面包含一个按钮。点击这个按钮就可以激活这个漂亮的自定义弹出窗口了!抛弃浏览器自带的生硬弹窗效果吧!
第二步:创建一个简单的网页
HTML
这里,我们创建了2个html区块。一个DIV名为popupContact,这里是弹出窗口中所包含的内容,初始状态下它是不可见的(通过CSS实现)。另一个DIV区块:backgroundPopup主要用做陪衬突出我们弹出窗口的效果,它初始状态也是不可见的。所谓红花还须绿叶衬,就是这个道理了。
- <body>
- <center>
- <p><a href="http://www.code52.net"><img src="logo.gif" alt="点击进入代码吾爱"/></a></p>
- <p><a href="http://www.code52.net"><img src="banner.bmp" alt="点击进入代码吾爱"/></a></p>
- <div id="button"><input type="submit" value="点击这里查看效果" /></div>
- <p></p>
- <p>查看教程原文:<a href="http://www.code52.net/page/JS/js200811_26_225.html">Jquery教程:JS弹出窗口DIV层效果代码 </a></p>
- </center>
- <div id="popupContact">
- <a id="popupContactClose">x</a>
- <h1>弹出窗口的标题</h1>
- <p id="contactArea">
- 这就是我们创建的漂亮DIV弹窗效果。可以看到jQuery实在是非常强大,我们仅需少量的CSS和JavaScript代码即可完成这一效果。<br/><br/>
- 我们可以在这个弹窗之中放置一个登录框、注册表单、重要事件提醒等等。
- <br/><br/>
- 要关闭这个窗口,请点击右上方的X按钮或点击弹窗外的背景或按下键盘上的ESC键。
- <br/><br/>
- <center><a href="http://www.code52.net/"><img src="logo.gif" alt="点击进入代码吾爱"/></a></center>
- </p>
- </div>
- <div id="backgroundPopup"></div>
- </body>
CSS样式
写好了HTML代码,我们需要给这个网页添加一些CSS样式了。其中最重要的是将popupContact 和 backgroundPopup 2个DIV区块隐藏起来。因为我们在打开页面的时候并不希望见到他们,不是么?它们的出现得益于用户主动按下某个按钮或链接,然后通过JavaScript来显示它们。
1.
2. #backgroundPopup{
3. display:none;
4. position:fixed;
5. _position:absolute;
6. height:100%;
7. width:100%;
8. top:0;
9. left:0;
10. background:#000000;
11. border:1px solid #cecece;
12. z-index:1;
13. }
14. #popupContact{
15. display:none;
16. position:fixed;
17. _position:absolute;
18. height:384px;
19. width:408px;
20. background:#FFFFFF;
21. border:2px solid #cecece;
22. z-index:2;
23. padding:12px;
24. font-size:13px;
25. }
26. #popupContact h1{
27. text-align:left;
28. color:#6FA5FD;
29. font-size:22px;
30. font-weight:700;
31. border-bottom:1px dotted #D3D3D3;
32. padding-bottom:2px;
33. margin-bottom:20px;
34. }
35. #popupContactClose{
36. font-size:14px;
37. line-height:14px;
38. right:6px;
39. top:4px;
40. position:absolute;
41. color:#6fa5fd;
42. font-weight:700;
43. display:block;
44. }
CSS代码有些长,不过真正需要大家修改的是我上面做过注释的区块。都是一些非常常见的CSS属性定义。如果有不懂的地方,请查找本站对应资源。
第四步:添加JavaScript代码
此步是本教程的核心,也是实现DIV弹出窗口效果的核心步骤。jQuery允许我们仅通过少数几个过程函数实现这个超酷的弹窗效果;所有这些函数都被我单独打包成了一个JS文件——popup.js。
代码流程解释
我们首先需要创建一个名称为popupStatus的变量来控制弹出窗口的显示与否。
|
接下来是我们的主函数——Jquery加载弹窗函数:
|
关闭/去除弹出窗口的函数:
|
我们还希望弹窗出现在屏幕的中央位置:
|
好了,有了这些基本函数,我们就可以通过jQuery对事件的触发控制来组合这些基本函数以实现弹出DIV效果了。比如,当用户触发点击按钮事件时,我们 依次执行居中函数(centerPopup)和窗口加载函数(loadPopup)即可。当用户点击弹出窗口右上方的"X"形关闭按钮时,触发一个事件执 行:关闭弹窗函数。
需要注意的是,所有这些事件触发过程都必须包含在以下代码中:
|
当按下id为#button的按钮时触发弹出窗口的事件:
|
最后一步是关闭事件的触发,这里我们编写了三种不同的方式来触发关闭窗口事件:点击弹窗右上角的"X"、点击窗口周围的背景和按下键盘上的ESC键。所以代码如下:
1. //关闭弹出窗口
2. //点击"X"所触发的事件
3. $("#popupContactClose").click(function(){
4. disablePopup();
5. });
6. //点击窗口以外背景所触发的关闭窗口事件!
7. $("#backgroundPopup").click(function(){
8. disablePopup();
9. });
10. //键盘按下ESC时关闭窗口!
11. $(document).keypress(function(e){
12. if(e.keyCode==27 &amp;&amp; popupStatus==1){
13. disablePopup();
14. }
15. });