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