<!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模拟Windows弹出窗口”就是关于如何利用这些技术创建一个与JavaScript内置`alert()`函数类似，但外观更加美观且可自定义的对话框。 首先，我们从HTML基础开始。在页面上，你需要一个隐藏的`div`元素，...
本资源“漂亮的div弹出窗口样式”提供了一种美观的弹出窗口设计，适用于网页中的各种提示、警告或者信息展示。通过解压文件并双击html页面，我们可以直接预览这个弹出窗口的效果。 首先，我们来详细了解一下div弹出...
与传统的JavaScript alert、confirm和prompt不同，自定义的弹出窗口通过CSS控制样式，用JavaScript实现交互功能，提供了更高的定制性和用户体验。 描述中提到的“窗口可以拖动”，这涉及到JavaScript的事件监听和...
同时，为了确保弹出窗口不会遮挡重要的页面内容，我们可能需要调整其位置，可以使用JavaScript计算并设置`top`和`left`属性。 总的来说，JavaScript弹出DIV层窗口实例是网页交互设计中常见的功能，通过理解和实践，...
以上就是使用Div元素实现带有弹出层的模拟窗口的基本步骤。你可以根据实际需求进一步定制样式，比如添加过渡动画、调整窗口大小、拖动功能等。这种方法灵活性高，不需要依赖外部库，适用于对性能和轻量化有较高要求...
jquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery...
### JavaScript弹出窗口DIV层效果代码详解 在现代网页设计中，弹出窗口或模态框（Modal）是一种常见的交互模式，用于展示额外的信息、表单或其他内容，而不需重新加载整个页面。本文将深入解析如何使用纯JavaScript...
在网页设计中，"用DIV层的方式弹出Web窗体"是一种常见的交互方式，它可以提供一个浮动的、半透明的或者完全独立的界面，用于显示信息、提示、表单或其他用户交互元素。这种方式通常比传统的JavaScript alert对话框...
JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIV ...JavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIV
2. **模拟弹出窗口**：利用div，我们可以创建可拖动、可关闭的浮动窗体，通过JavaScript监听用户的鼠标事件来实现这些功能。 3. **内容隔离**：IFrame可以提供一种内容隔离机制，使得一个页面的不同部分不会互相...
2. CSS样式与HTML布局：使用div元素创建自定义对话框，可以通过CSS来控制弹出窗体的外观，包括颜色、字体、边框、阴影、动画效果等，同时通过布局确保其在页面中的位置正确。 3. DOM操作：JavaScript可以用来动态...
在ASP.NET中，弹出窗体可以使用`window.open`JavaScript函数实现，而传值则可以通过以下几种方式： 1. **URL参数**：在打开弹出窗口时，可以在URL中添加查询字符串来传递数据。弹出窗口加载后，可以通过JavaScript...
在网页设计中，"DIV弹出窗（兼容主流浏览器）"是一种常见的用户界面元素，用于在用户与页面交互时提供额外的信息或者功能。这个技术基于HTML的`<div>`元素，通过CSS样式和JavaScript实现动态效果，以确保在各种主流...
总结起来，JavaScript弹出窗口通过`window.open`函数实现，可以根据需求自定义窗口的属性，如大小、位置和显示元素，并通过函数和事件绑定来控制何时打开窗口。掌握这些知识，你可以更加灵活地在网页中实现各种弹出...
"无边弹出窗口全集"这个资源很可能是集合了多种JavaScript实现的弹出窗口效果，旨在帮助开发者学习和应用各种弹出窗口的创建技巧。 弹出窗口通常分为两种类型：模态（Modal）和非模态（Non-Modal）。模态弹出窗口会...
在网页设计中，"div弹出窗口"是一个常见的交互元素，它允许开发者创建不依赖浏览器原生功能的自定义对话框。在这个例子中，我们看到一个名为“div弹出窗口.rar”的压缩包，里面可能包含了实现这一功能的相关HTML、...
用JavaScript实现弹出窗口 用JavaScript实现弹出窗口 用JavaScript实现弹出窗口
4. **显示弹出窗口**：在JavaScript事件处理函数中，显示刚才创建的弹出窗口。可以改变弹出窗口的CSS属性，例如`display`，使其可见： ```javascript document.getElementById('popup').style.display = 'block'; ...