Jquery教程:JS弹出窗口DIV层效果代码
2011-09-26 16:58
736 查看
转载自 分享
使用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来显示它们。
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute;
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
CSS代码有些长，不过真正需要大家修改的是我上面做过注释的区块。都是一些非常常见的CSS属性定义。如果有不懂的地方，请查找本站对应资源。
第四步：添加JavaScript代码
此步是本教程的核心，也是实现DIV弹出窗口效果的核心步骤。jQuery允许我们仅通过少数几个过程函数实现这个超酷的弹窗效果；所有这些函数都被我单独打包成了一个JS文件——popup.js。
代码流程解释
我们首先需要创建一个名称为popupStatus的变量来控制弹出窗口的显示与否。
接下来是我们的主函数——Jquery加载弹窗函数：
关闭/去除弹出窗口的函数：
我们还希望弹窗出现在屏幕的中央位置：
好了，有了这些基本函数，我们就可以通过jQuery对事件的触发控制来组合这些基本函数以实现弹出DIV效果了。比如，当用户触发点击按钮事件时，我们 依次执行居中函数（centerPopup）和窗口加载函数（loadPopup）即可。当用户点击弹出窗口右上方的"X"形关闭按钮时，触发一个事件执 行：关闭弹窗函数。
需要注意的是，所有这些事件触发过程都必须包含在以下代码中：
当按下id为#button的按钮时触发弹出窗口的事件：
最后一步是关闭事件的触发，这里我们编写了三种不同的方式来触发关闭窗口事件：点击弹窗右上角的"X"、点击窗口周围的背景和按下键盘上的ESC键。所以代码如下：
//关闭弹出窗口
//点击"X"所触发的事件
$("#popupContactClose").click(function(){
disablePopup();
});
//点击窗口以外背景所触发的关闭窗口事件!
$("#backgroundPopup").click(function(){
disablePopup();
});
//键盘按下ESC时关闭窗口!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
}
});
使用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来显示它们。
#backgroundPopup{
display:none;
position:fixed;
_position:absolute;
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupContact{
display:none;
position:fixed;
_position:absolute;
height:384px;
width:408px;
background:#FFFFFF;
border:2px solid #cecece;
z-index:2;
padding:12px;
font-size:13px;
}
#popupContact h1{
text-align:left;
color:#6FA5FD;
font-size:22px;
font-weight:700;
border-bottom:1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupContactClose{
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#6fa5fd;
font-weight:700;
display:block;
}
CSS代码有些长，不过真正需要大家修改的是我上面做过注释的区块。都是一些非常常见的CSS属性定义。如果有不懂的地方，请查找本站对应资源。
第四步：添加JavaScript代码
此步是本教程的核心，也是实现DIV弹出窗口效果的核心步骤。jQuery允许我们仅通过少数几个过程函数实现这个超酷的弹窗效果；所有这些函数都被我单独打包成了一个JS文件——popup.js。
代码流程解释
我们首先需要创建一个名称为popupStatus的变量来控制弹出窗口的显示与否。
| //初始化：是否开启DIV弹出窗口功能 //0 表示开启; 1 表示不开启; var popupStatus = 0; |
| //使用Jquery加载弹窗 function loadPopup(){ //仅在开启标志popupStatus为0的情况下加载 if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } |
| //使用Jquery去除弹窗效果 function disablePopup(){ //仅在开启标志popupStatus为1的情况下去除 if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } |
| //将弹出窗口定位在屏幕的中央 function centerPopup(){ //获取系统变量 var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //居中设置 $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //以下代码仅在IE6下有效 $("#backgroundPopup").css({ "height": windowHeight }); } |
需要注意的是，所有这些事件触发过程都必须包含在以下代码中：
| $(document).ready(function(){ //执行触发事件的代码区域 }); |
| //打开弹出窗口 //按钮点击事件! $("#button").click(function(){ //调用函数居中窗口 centerPopup(); //调用函数加载窗口 loadPopup(); }); |
//关闭弹出窗口
//点击"X"所触发的事件
$("#popupContactClose").click(function(){
disablePopup();
});
//点击窗口以外背景所触发的关闭窗口事件!
$("#backgroundPopup").click(function(){
disablePopup();
});
//键盘按下ESC时关闭窗口!
$(document).keypress(function(e){
if(e.keyCode==27 &amp;&amp; popupStatus==1){
disablePopup();
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Jquery：JS弹出窗口DIV层效果
- jquery实现弹出窗口效果的实例代码
- jquery实现弹出窗口效果的实例代码
- JavaScript弹出窗口DIV层效果代码
- JavaScript弹出窗口DIV层效果代码 [
- JAVASCRIPT弹出窗口DIV层效果代码
- jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
- jquery实现弹出窗口效果的实例代码
- JavaScript弹出窗口DIV层效果代码
- jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
- JQuery 增加、删除表格div层文本内容的JS代码 和仿select个性下拉框选择效果JS代码
- 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
- 一段js的代码，用来控制弹出窗口的位置
- JS组件Bootstrap实现弹出框效果代码
- js弹出窗口和遮罩效果
- js点击弹出div层实现可拖曳的弹窗效果
- js框架jquery瀑布流图片墙效果代码下载,点击相册图片展示大图
- js实现弹出窗口代码集萃 (怕忘记找别人的)
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- jQuery实现弹出带遮罩层的居中浮动窗口效果