`
sty2008boy
  • 浏览: 301023 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

淡入淡出弹出层

    博客分类:
  • CSS
阅读更多
<!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顶部浮动弹出层动画弹出层特效"这个主题中,我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果,特别是在页面顶部浮动的设计。 首先,让我们了解什么是弹出层。弹出层是一种网页设计技术,它...

    20种弹出层,弹窗 jQuery+CSS3 多功能弹出层插件v2.0.1

    1. 淡入淡出:最基础的弹出效果,弹出层在点击或触发事件后慢慢显现,消失时同样逐渐淡化。 2. 侧滑:从屏幕边缘滑入,适合用于导航菜单或工具提示。 3. 上下滑动:从上方或下方滑动进入,适用于消息通知。 4. 翻转...

    很犀利的弹出层,弹出层代码

    - **动画效果**:通过设置CSS过渡(`transition`)和JavaScript的延迟(`setTimeout`)实现弹出层的淡入淡出效果。 2. **CSS 弹出层设计**: - **定位**:使用绝对定位(`position: absolute`)或固定定位(`...

    弹出层2,可以弹出多个层,并实现数据交互

    为了增强用户体验,弹出层通常会带有进入和退出的动画效果,如淡入淡出、滑动等。这些效果可以通过CSS3的transition或JavaScript库如jQuery来实现。 8. **关闭逻辑**: 弹出层的关闭逻辑也非常重要,包括用户手动...

    jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层特效.zip

    在这个弹出层特效中,可能在淡入淡出的同时,弹出层会有一个平滑的滑动动作,增加用户体验。 5. **关闭按钮(Close Button)**:弹出层通常包含一个关闭按钮,让用户能够方便地关闭弹出层。在jQuery中,可以为这个...

    jquery弹出层 jquery弹出层 jquery弹出层

    4. **动画效果**:jQuery提供了丰富的动画效果,如淡入淡出(`fadeIn/fadeOut`)、滑动(`slideToggle`)等,可以添加到弹出层的显示和隐藏过程中,增加视觉吸引力。 5. **阻止背景交互**:为了让用户专注于弹出层,...

    18种非常实用的js弹出层

    4. **动画效果**:为了提升用户体验,弹出层往往有各种动画效果,比如淡入淡出、滑动、缩放等。这些效果可以通过CSS3的transition或animation属性实现,也可以借助JavaScript库如jQuery进行更复杂的动画控制。 5. *...

    jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层效果

    标题所提到的"jQuery点击弹出层带关闭按钮的淡出淡进滑动弹出层效果"是jQuery应用中的一个常见功能,常用于创建诸如模态窗口、提示框或者信息展示区域等交互元素。 首先,我们来理解“弹出层”(也称为“对话框”或...

    JS弹出层大集合。很多好用的JS弹出层代码

    JavaScript(简称JS)弹出层是一种常见的网页交互设计,它可以在用户与网页交互时弹出一个浮动窗口,显示额外的信息、提示或者进行某些操作。在网页开发中,弹出层通常用于实现模态对话框、警告提示、信息确认、表单...

    几种网页弹出层的实例

    在"弹出层"文件中,你可能会找到不同类型的动态弹出效果,如淡入淡出、滑动、缩放等。这些效果通常通过CSS3的过渡(transition)和动画(animation)属性实现,或者利用JavaScript库(如Bootstrap的Modal插件)提供...

    jquery弹出层框架方便简单

    同时,还支持动画效果,如淡入淡出、滑动等,使得弹出层的展现更加优雅。例如,我们可以设置弹出层为全屏模式,并添加淡入效果: ```javascript $("#element").dialog({ fullScreen: true, openEffect: 'fade', ...

    html5手机端点击弹出层

    为了使弹出层更具吸引力和交互性,我们还可以使用CSS3添加动画效果,比如淡入淡出、滑动等。例如,使用CSS3的`transition`属性实现弹出层的平滑显示: ```css #popup { opacity: 0; transition: opacity 0.5s ...

    js 弹出层 效果 仿百度

    5. **动画效果**:为了提升用户体验,弹出层的出现和消失通常伴随着动画效果,如淡入淡出(fadeIn/fadeOut)、滑动等。这可以通过改变CSS的`transition`或`animation`属性来实现。 6. **关闭机制**:弹出层通常有一...

    jquery弹出层特效超炫

    // 淡入显示弹出层,500毫秒内完成 $("#popup").fadeOut(300); // 淡出隐藏弹出层,300毫秒内完成 ``` 三、弹出层触发事件 1. 鼠标点击触发:可以绑定`.click()`事件来响应用户的点击操作,触发弹出层显示。...

    jquery弹出层

    **jQuery弹出层详解** 在Web开发中,弹出层是一种常见的交互元素,它能够以非侵入式的方式向用户展示信息,如警告、提示、表单或详细内容。jQuery库以其简洁的API和强大的功能,使得创建弹出层变得非常容易。本篇...

    Jquery弹出层时尚特效10种

    【jQuery弹出层时尚特效10种】 在Web开发中,弹出层(Modal)是一种常用的交互元素,它能够在用户不离开当前页面的情况下显示额外的信息或功能。jQuery库以其强大的DOM操作和事件处理能力,为创建弹出层特效提供了...

    一个简单好用的弹出层

    4. **动画效果**:弹出层通常会搭配过渡动画,如淡入淡出、滑动等,提升用户体验。 5. **响应式设计**:在移动设备上,弹出层需要适应不同的屏幕尺寸,确保内容可读且操作方便。 6. **事件处理**:开发者可以监听...

    javascript弹出层

    JavaScript弹出层是一种常见的网页交互元素,用于在用户与页面交互时显示额外信息或功能。在网页设计中,弹出层通常用来展示警告、提示、表单、图片、广告等,而无需离开当前页面。本篇文章将深入探讨如何使用...

Global site tag (gtag.js) - Google Analytics