用jQ实现浮动窗口功能,弹出窗口时背景变暗.
预览:
html代码
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/overflow.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b = $("#b");
var overFlow = $("#over");
b.click(function(){
overFlow.fadeIn();
$("#mask").css("background","#111");
$("#mask").css("opacity","0.8");
})
$("#close").click(function(){
overFlow.fadeOut();
$("#mask").css("background","#fff");
$("#mask").css("opacity","1");
});
drag($("#over"),$("#title"));
}) ;
</script>
</head>
<body>
<div id="over">
<div id="title"><span id="t">这只是一个演示标题</span><span id="close">[ x ]</span></div>
<div id="content">
When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.<br/>
---This is edited by Alp.
</div>
</div>
<div id="mask"> <a id="b" href="#">click</a></div>
</body>
</html>
js代码
function drag(overFlow,title){
title.onmousedown = function(evt){
var doc = document;
var evt = evt || window.event;
var x = evt.offsetX?evt.offsetX:evt.layerX;
var y = evt.offsetY?evt.offsetY:evt.layerY;
if(overFlow.setCapture){
overFlow.setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove = function(evt){
evt = evt || window.event;
var xPosition = evt.pageX || evt.clientX;
var yPosition = evt.pageY || evt.clientY;
var newX = xPosition - x;
var newY = yPosition - y;
overFlow.style.left = newX;
overFlow.style.top = newY;
};
doc.onmouseup = function(){
if(overFlow.releaseCapture){
overFlow.releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
doc.onmousemove=null;
doc.onmouseup=null;
};
};
}
css代码
#over{
position: absolute;
left: 300px;
top: 200px;
border: 1px solid black;
display: none;
background: #cccccc;
cursor: default;
width: 300px;
z-index: 10;
opacity: 1;
}
#title{
border: 1px solid #1840C4;
background: #95B4DC;
padding: 2px;
font-size:12px;
cursor: default;
}
#close{
cursor: pointer;
margin-right: 1px;
overflow: hidden;
}
#content{
border: 1px solid #C2D560;
background: #EFF4D7;
}
#t{
margin-right:145px;
}
#mask{
z-index: 1;
background: #fff;
width: 1024px;
height: 800px;
}
#b{
position: absolute;
left: 200px;
top: 100px;
}
body{
padding: 0px;
margin: 0px;
}
#over{
background: transparent;
}
- 大小: 22.3 KB
分享到：
- 2008-07-27 04:20
- 浏览 3836
- 评论(4)
- 论坛回复 / 浏览 (3 / 14047)
- 查看更多
相关推荐
在本篇文章中，我们将深入探讨浮动窗口的概念、实现原理以及相关的编程实践。 首先，浮动窗口的核心在于其定位方式。与传统的静态窗口不同，浮动窗口的坐标通常相对于屏幕或父容器，而不是固定在某个绝对位置。这...
弹出模式窗口（Modal Dialog）是一种覆盖在网页主内容上的浮动窗口，通常用于获取用户输入、展示信息或执行某种操作。它们在页面上以半透明背景层和聚焦的对话框形式出现，确保用户必须先处理弹出窗口才能继续与页面...
本篇文章将深入探讨如何利用jQuery和CSS技术实现图片浮动层效果，包括原理、实现步骤及示例代码。 首先，我们需要了解浮动层的基本概念。浮动层，也称为漂浮窗口或弹出层，是在网页上创建的一种可移动、可隐藏的...
两者都是在页面上创建浮动窗口的方法，但它们的实现方式和功能略有不同。 **jQuery Dialog插件** jQuery Dialog是一种模态或非模态的窗口，可以用来替代传统的JavaScript弹窗。它的主要特点包括： 1. **可定制性*...
jQuery可以创建模态对话框，例如jQuery UI的Dialog，它可以在页面上显示一个浮动窗口，用于展示信息、确认操作或收集用户输入。 十、无限滚动（Infinite Scroll） 无限滚动是一种用户体验优化技术，当用户接近页面...
这个放大层通常是一个小的浮动窗口，显示的是鼠标下方图片对应区域的放大版本。 ### 3. 实现步骤 #### 步骤1：引入jQuery库和放大镜插件 首先，我们需要在HTML文件中引入jQuery库，以及专门用于实现放大镜效果的...
默认情况下，Dialog会显示一个模态或非模态的浮动窗口，用户可以通过设置参数来调整其样式、大小、位置和行为。 在`jquery-ui-ajax-dialog.js`中，我们可以看到Dialog与Ajax的结合。Ajax允许我们在不刷新页面的情况...
本篇文章将深入探讨如何利用jQuery来实现一系列有趣的网页小游戏，包括纸牌游戏、围棋游戏以及仿QQ对话框。 **一、jQuery基础与优势** jQuery的核心理念是“Write Less, Do More”，它通过提供简洁的API，使得...
在本篇文章中，我们将深入探讨jQuery UI 1.12.1这一版本的特点和功能，以及如何利用它来提升用户体验。 首先，jQuery UI 1.12.1是该库的一个稳定版本，具有广泛的兼容性和优化，适用于各种现代浏览器和项目需求。这...
在JavaScript和jQuery的世界里，实现元素的拖拽（Draggable）和吸附（Docking）功能是一项常见的需求，尤其是在创建交互式用户界面时。本篇将深入讲解如何利用这两种技术来增强网页的动态性和用户体验。 首先，...
本篇文章将详细讲解如何利用jQuery实现一个浮动广告横幅的效果，以及涉及的相关技术知识点。 首先，jQuery浮动广告横幅的核心在于创建一个在页面底部始终可见的元素，通常是一个包含广告内容的横幅。这种效果可以...
弹出层（也称为模态窗口或对话框）是一种浮动于网页主内容之上的窗口，用户必须与之交互（如点击按钮或填写信息）后才能继续浏览页面。以下我们将通过几个关键步骤来构建一个基本的jQuery弹出层。 1. **HTML结构**...
本篇文章将深入探讨一个名为“动感有趣的jQuery浮动QQ在线客服代码”的实践案例，该案例包含的文件有index.html、images、js和css目录，它们共同构建了一个能够动态展示并跟随用户滚动的QQ在线客服系统。 首先，...
- **模态框**: 创建浮动层效果，用于显示提示信息或弹出窗口。 - **滚动监听**: 监听滚动事件，实现页面滚动时的特定行为，如固定头部或加载更多内容。 以上内容仅是jQuery众多特性和功能的冰山一角。通过博客中...
本篇文档基于一份由ITCAST提供的jQuery实战教程，聚焦于如何利用jQuery创建窗口效果。通过一系列实用技巧与示例，帮助读者深入理解并掌握相关技术点。 #### 二、核心知识点解析 ##### 2.1 模拟窗口的基本构建 - *...
- 对话框（Dialog）：提供模态或非模态窗口，用于弹出提示、确认框或浮动窗口。 - 效果（Effects）：包括淡入淡出、滑动、切换等多种动画效果，提升用户体验。 - 菜单（Menu）：创建下拉菜单，适用于导航栏或工具...
本篇将深入探讨如何使用jQuery创建超炫的弹出层特效，以提升网站的用户体验。 一、jQuery弹出层基础 1. 弹出层定义：弹出层通常是指在页面原有内容上临时显示的一块浮动区域，它可以是对话框、图片预览、表单填写...
本篇文章将详细解析如何使用jQuery和Bootstrap来创建一个功能完备且美观的顶部浮动导航菜单。 首先，Bootstrap是一个流行的前端开发框架，它提供了丰富的预设样式和组件，大大简化了网页设计的工作。在我们的案例中...
本篇将详细解析"jQuery可伸展的侧边栏固定浮动菜单特效源码"，帮助开发者理解和应用这个效果。 首先，让我们理解"侧边栏固定浮动菜单"的概念。这种设计通常用于网页布局中，菜单固定在页面的一侧（通常是左侧或右侧...
本篇文章将深入探讨如何利用jQuery库，特别是经过改写的`jquery.scroll-follow.js`插件，来实现这一功能，并兼容jQuery的最新版本（1.7.2）。 首先，`jquery.scroll-follow.js`是一个专门针对滚动跟随场景设计的...