<!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元素来模拟一个能够跟随内容滚动的弹出窗口。这种技术在许多现代网页应用中非常常见，主要用于展示信息、帮助提示或用户交互等功能。文章由作者丁学进行编写，...
与传统的JavaScript alert、confirm和prompt不同，自定义的弹出窗口通过CSS控制样式，用JavaScript实现交互功能，提供了更高的定制性和用户体验。 描述中提到的“窗口可以拖动”，这涉及到JavaScript的事件监听和...
在 DIV 实现弹出窗口技术中，我们可以使用多种方式来显示弹出窗口，例如，可以使用 JavaScript 代码来动态创建 DIV 元素，然后将其追加到页面上；或者，可以使用 CSS 代码来设置弹出窗口的样式和布局。 在本文中，...
同时，为了确保弹出窗口不会遮挡重要的页面内容，我们可能需要调整其位置，可以使用JavaScript计算并设置`top`和`left`属性。 总的来说，JavaScript弹出DIV层窗口实例是网页交互设计中常见的功能，通过理解和实践，...
本文将详细讲解如何使用Div元素创建一个带有弹出层的模拟窗口，并结合动态传入值的功能。 一、Div元素介绍 Div（Division）是HTML中的一个块级元素，用于组织文档结构，可以通过CSS进行样式定义，实现各种布局效果...
### JavaScript弹出窗口DIV层效果代码详解 在现代网页设计中，弹出窗口或模态框（Modal）是一种常见的交互模式，用于展示额外的信息、表单或其他内容，而不需重新加载整个页面。本文将深入解析如何使用纯JavaScript...
在网页设计中，"用DIV层的方式弹出Web窗体"是一种常见的交互方式，它可以提供一个浮动的、半透明的或者完全独立的界面，用于显示信息、提示、表单或其他用户交互元素。这种方式通常比传统的JavaScript alert对话框...
JavaScript 模式窗口 弹出窗 DIV JavaScript 模式窗口 弹出窗 DIV ...JavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIVJavaScript 模式窗口 弹出窗 DIV
2. **模拟弹出窗口**：利用div，我们可以创建可拖动、可关闭的浮动窗体，通过JavaScript监听用户的鼠标事件来实现这些功能。 3. **内容隔离**：IFrame可以提供一种内容隔离机制，使得一个页面的不同部分不会互相...
在网页设计中，"漂亮的div弹出窗口"是一种常见的交互元素，它用于向用户展示重要的信息、提示或者功能。div是HTML中的一个区块级元素，全称为Division，用于组织页面内容。通过CSS（Cascading Style Sheets）进行...
本案例集主要探讨如何利用"div"配合CSS（层叠样式表）和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验至关重要，如消息提示、登录框、模态对话框等。 首先，我们来看"iframe的div遮罩层(可...
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`函数实现，可以根据需求自定义窗口的属性，如大小、位置和显示元素，并通过函数和事件绑定来控制何时打开窗口。掌握这些知识，你可以更加灵活地在网页中实现各种弹出...
在本案例中，"使用DIV层显示弹出窗口效果"意味着开发者将利用HTML的<div>元素，配合CSS来创建可浮动、可定位的窗口，并用JavaScript控制其显示和隐藏。 首先，我们来理解<div>元素。在HTML中，<div>是一个通用的...
通过以上步骤和技巧，你可以创建一个基本的、使用`<div>`实现的弹出窗口。但记住，网页开发是一个不断学习和改进的过程，随着技术的发展，如Vue.js、React等前端框架提供了更高级的组件化和状态管理方法，可以更方便...
4. **显示弹出窗口**：在JavaScript事件处理函数中，显示刚才创建的弹出窗口。可以改变弹出窗口的CSS属性，例如`display`，使其可见： ```javascript document.getElementById('popup').style.display = 'block'; ...
简单实现javascript弹DIV层
自定义弹出窗口，正如其名，允许开发者根据需求设计并构建出与系统默认样式不同的对话框，提供更个性化的用户体验。在这里，我们将深入探讨如何创建和实现这样的功能。 首先，我们需要理解弹出窗口的基本概念。在...