<!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" lang="zh-CN">
<head>
<title></title>
<script>
function getPosition() {
var top = document.documentElement.scrollTop;
var left = document.documentElement.scrollLeft;
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
return {top:top,left:left,height:height,width:width};
}
function showPop(){
var width = 300; //弹出框的宽度
var height = 160; //弹出框的高度
var obj = document.getElementById("pop");
obj.style.display = "block";
obj.style.position = "absolute";
obj.style.zindex = "999";
obj.style.width = width + "px";
obj.style.height = height + "px";
var Position = getPosition();
leftadd = (Position.width-width)/2;
topadd = (Position.height-height)/2;
obj.style.top = (Position.top + topadd) + "px";
obj.style.left = (Position.left + leftadd) + "px";
window.onscroll = function (){
var Position = getPosition();
obj.style.top = (Position.top + topadd) +"px";
obj.style.left = (Position.left + leftadd) +"px";
};
}
function hidePop(){
document.getElementById("pop").style.display = "none";
}
</script>
</head>
<body>
<div id="pop" style="border:1px solid #CCC;display:none;">test<br /><a href="javascript:hidePop();">hide</a></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>
<a href="javascript:showPop()">show</a>
<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>
分享到：
相关推荐
### JavaScript 使用 DIV 模拟弹出窗口与窗体滚动跟随技术解析 #### 一、概述 在网页设计中，为了实现更加丰富的交互效果，开发者常常需要实现一些特殊的功能，比如弹出窗口。传统的弹出窗口可能通过浏览器自身的 ...
本资源“漂亮的div弹出窗口样式”提供了一种美观的弹出窗口设计，适用于网页中的各种提示、警告或者信息展示。通过解压文件并双击html页面，我们可以直接预览这个弹出窗口的效果。 首先，我们来详细了解一下div弹出...
同时，为了确保弹出窗口不会遮挡重要的页面内容，我们可能需要调整其位置，可以使用JavaScript计算并设置`top`和`left`属性。 总的来说，JavaScript弹出DIV层窗口实例是网页交互设计中常见的功能，通过理解和实践，...
以上就是使用Div元素实现带有弹出层的模拟窗口的基本步骤。你可以根据实际需求进一步定制样式，比如添加过渡动画、调整窗口大小、拖动功能等。这种方法灵活性高，不需要依赖外部库，适用于对性能和轻量化有较高要求...
在这个项目中，我们将深入探讨如何使用div元素来创建弹出窗口，并通过CSS、HTML和JavaScript实现各种弹出效果。 首先，`lhgdialog.css`是样式表文件，用于定义弹出窗口的外观和布局。在CSS中，我们可以设置div的宽...
jquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery...
### JavaScript弹出窗口DIV层效果代码详解 在现代网页设计中，弹出窗口或模态框（Modal）是一种常见的交互模式，用于展示额外的信息、表单或其他内容，而不需重新加载整个页面。本文将深入解析如何使用纯JavaScript...
根据提供的文件信息，本文将详细解释如何使用DIV+CSS实现一个美观且实用的弹出窗体，这种技术常用于创建类似QQ空间登录窗口的效果。本文将深入探讨代码中涉及的关键CSS样式、HTML结构以及简单的JavaScript交互逻辑。...
在网页设计中，"用DIV层的方式弹出Web窗体"是一种常见的交互方式，它可以提供一个浮动的、半透明的或者完全独立的界面，用于显示信息、提示、表单或其他用户交互元素。这种方式通常比传统的JavaScript alert对话框...
在本文中，我们将深入探讨使用`div`元素创建弹出窗口的技术细节，以及如何通过CSS和JavaScript实现这一功能。 首先，`div`（Division）是HTML中的一个块级元素，它主要用于组织和布局网页内容。在创建弹出窗口时，`...
### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言，它在前端开发中占据着极其重要的地位。通过JavaScript，开发者可以实现网页与用户的交互功能，其中弹出窗口就是一种常见的...
lhgdialog框架是一个轻量级的、高度可定制的弹出窗口解决方案，它通过使用HTML的DIV元素和CSS样式来构建弹出窗口，实现了无刷新的交互体验。相比Alert，lhgdialog提供了更为丰富的功能和更美观的界面，能够更好地...
在本文中，我们主要介绍如何使用JavaScript技术实现一个功能，即当用户点击输入框时，会弹出一个窗体供用户选择信息。这个过程涉及到了JavaScript的基本语法、DOM操作、事件处理以及简单的样式应用等知识点。 首先...
2. **模拟弹出窗口**：利用div，我们可以创建可拖动、可关闭的浮动窗体，通过JavaScript监听用户的鼠标事件来实现这些功能。 3. **内容隔离**：IFrame可以提供一种内容隔离机制，使得一个页面的不同部分不会互相...
接下来，我们要用 JavaScript 控制这个弹出窗口的显示与隐藏。在 `<script>` 标签中或者外部的 `.js` 文件里，我们添加以下代码： ```javascript // 获取弹出窗口元素 var popup = document.getElementById("popup...
在IT行业中，弹出窗口是一种常见的用户界面设计元素，它用于显示额外的信息或者与用户进行交互。本资料主要探讨弹出窗口的相关知识点，包括其功能、类型、实现方式以及优化策略。 1. 弹出窗口的功能： 弹出窗口...
在网页设计中，"DIV弹出窗（兼容主流浏览器）"是一种常见的用户界面元素，用于在用户与页面交互时提供额外的信息或者功能。这个技术基于HTML的`<div>`元素，通过CSS样式和JavaScript实现动态效果，以确保在各种主流...
### JavaScript弹出窗口代码详解 在网页开发过程中，有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能，这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...