<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框-Download by http://www.codefans.net</title>
<style type="text/css">
<!--
#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;
cursor:pointer;
}
-->
</style>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//初始化:是否开启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
});
}
//打开弹出窗口
//按钮点击事件!
$("#button").click(function(){
//调用函数居中窗口
centerPopup();
//调用函数加载窗口
loadPopup();
});
//关闭弹出窗口
//点击"X"所触发的事件
$("#popupContactClose").click(function(){
disablePopup();
});
//点击窗口以外背景所触发的关闭窗口事件!
$("#backgroundPopup").click(function(){
disablePopup();
});
//键盘按下ESC时关闭窗口!
$(document).keypress(function(e){
if(e.keyCode==27 && popupStatus==1){
disablePopup();
}
});
});
</script>
</head>
<body>
<center>
<div id="button"><input type="submit" value="点击这里查看效果" /></div>
</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/>
</p>
</div>
<div id="backgroundPopup"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
分享到:
相关推荐
在IT行业中,弹出提示框是一种常见的用户交互设计,它能够提供信息反馈或者请求用户的确认。本主题聚焦于实现一个具有淡入淡出效果的提示框,这种效果能为用户提供更为优雅和舒适的视觉体验。下面将详细介绍如何创建...
在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中,我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果,特别是在页面顶部浮动的设计。 首先,让我们了解什么是弹出层。弹出层是一种网页设计技术,它...
1. 淡入淡出:最基础的弹出效果,弹出层在点击或触发事件后慢慢显现,消失时同样逐渐淡化。 2. 侧滑:从屏幕边缘滑入,适合用于导航菜单或工具提示。 3. 上下滑动:从上方或下方滑动进入,适用于消息通知。 4. 翻转...
- **动画效果**:通过设置CSS过渡(`transition`)和JavaScript的延迟(`setTimeout`)实现弹出层的淡入淡出效果。 2. **CSS 弹出层设计**: - **定位**:使用绝对定位(`position: absolute`)或固定定位(`...
为了增强用户体验,弹出层通常会带有进入和退出的动画效果,如淡入淡出、滑动等。这些效果可以通过CSS3的transition或JavaScript库如jQuery来实现。 8. **关闭逻辑**: 弹出层的关闭逻辑也非常重要,包括用户手动...
在这个弹出层特效中,可能在淡入淡出的同时,弹出层会有一个平滑的滑动动作,增加用户体验。 5. **关闭按钮(Close Button)**:弹出层通常包含一个关闭按钮,让用户能够方便地关闭弹出层。在jQuery中,可以为这个...
4. **动画效果**:jQuery提供了丰富的动画效果,如淡入淡出(`fadeIn/fadeOut`)、滑动(`slideToggle`)等,可以添加到弹出层的显示和隐藏过程中,增加视觉吸引力。 5. **阻止背景交互**:为了让用户专注于弹出层,...
4. **动画效果**:为了提升用户体验,弹出层往往有各种动画效果,比如淡入淡出、滑动、缩放等。这些效果可以通过CSS3的transition或animation属性实现,也可以借助JavaScript库如jQuery进行更复杂的动画控制。 5. *...
标题所提到的"jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层效果"是jQuery应用中的一个常见功能,常用于创建诸如模态窗口、提示框或者信息展示区域等交互元素。 首先,我们来理解“弹出层”(也称为“对话框”或...
JavaScript(简称JS)弹出层是一种常见的网页交互设计,它可以在用户与网页交互时弹出一个浮动窗口,显示额外的信息、提示或者进行某些操作。在网页开发中,弹出层通常用于实现模态对话框、警告提示、信息确认、表单...
在"弹出层"文件中,你可能会找到不同类型的动态弹出效果,如淡入淡出、滑动、缩放等。这些效果通常通过CSS3的过渡(transition)和动画(animation)属性实现,或者利用JavaScript库(如Bootstrap的Modal插件)提供...
同时,还支持动画效果,如淡入淡出、滑动等,使得弹出层的展现更加优雅。例如,我们可以设置弹出层为全屏模式,并添加淡入效果: ```javascript $("#element").dialog({ fullScreen: true, openEffect: 'fade', ...
为了使弹出层更具吸引力和交互性,我们还可以使用CSS3添加动画效果,比如淡入淡出、滑动等。例如,使用CSS3的`transition`属性实现弹出层的平滑显示: ```css #popup { opacity: 0; transition: opacity 0.5s ...
5. **动画效果**:为了提升用户体验,弹出层的出现和消失通常伴随着动画效果,如淡入淡出(fadeIn/fadeOut)、滑动等。这可以通过改变CSS的`transition`或`animation`属性来实现。 6. **关闭机制**:弹出层通常有一...
// 淡入显示弹出层,500毫秒内完成 $("#popup").fadeOut(300); // 淡出隐藏弹出层,300毫秒内完成 ``` 三、弹出层触发事件 1. 鼠标点击触发:可以绑定`.click()`事件来响应用户的点击操作,触发弹出层显示。...
**jQuery弹出层详解** 在Web开发中,弹出层是一种常见的交互元素,它能够以非侵入式的方式向用户展示信息,如警告、提示、表单或详细内容。jQuery库以其简洁的API和强大的功能,使得创建弹出层变得非常容易。本篇...
【jQuery弹出层时尚特效10种】 在Web开发中,弹出层(Modal)是一种常用的交互元素,它能够在用户不离开当前页面的情况下显示额外的信息或功能。jQuery库以其强大的DOM操作和事件处理能力,为创建弹出层特效提供了...
4. **动画效果**:弹出层通常会搭配过渡动画,如淡入淡出、滑动等,提升用户体验。 5. **响应式设计**:在移动设备上,弹出层需要适应不同的屏幕尺寸,确保内容可读且操作方便。 6. **事件处理**:开发者可以监听...
JavaScript弹出层是一种常见的网页交互元素,用于在用户与页面交互时显示额外信息或功能。在网页设计中,弹出层通常用来展示警告、提示、表单、图片、广告等,而无需离开当前页面。本篇文章将深入探讨如何使用...