<!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编程中，"div弹出窗口"是一种常见的交互式设计，它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块，如图片画廊、表单等。在本...
在这个项目中，我们将深入探讨如何使用div元素来创建弹出窗口，并通过CSS、HTML和JavaScript实现各种弹出效果。 首先，`lhgdialog.css`是样式表文件，用于定义弹出窗口的外观和布局。在CSS中，我们可以设置div的宽...
jquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery简洁方便的弹出窗口效果(支持滚动条、左右切换、关闭功能).rarjquery...
### JavaScript弹出窗口DIV层效果代码详解 在现代网页设计中，弹出窗口或模态框（Modal）是一种常见的交互模式，用于展示额外的信息、表单或其他内容，而不需重新加载整个页面。本文将深入解析如何使用纯JavaScript...
在本文中，我们将深入探讨使用`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...
在网页设计中，"DIV弹出窗（兼容主流浏览器）"是一种常见的用户界面元素，用于在用户与页面交互时提供额外的信息或者功能。这个技术基于HTML的`<div>`元素，通过CSS样式和JavaScript实现动态效果，以确保在各种主流...
### JavaScript弹出窗口代码详解 在网页开发过程中，有时我们需要创建一个新的浏览器窗口来显示特定的信息或功能，这就需要用到JavaScript中的`window.open()`方法。本文将详细介绍如何使用此方法以及其参数的意义...
要实现一个DIV弹出窗口，通常会结合CSS（Cascading Style Sheets）来设置样式，使其在需要时显示或隐藏，并通过JavaScript或jQuery进行交互控制。 1. **CSS样式**： - 定位：使用`position: absolute`或`fixed`来...
在网页设计中，"div+css实现弹出窗口背景变暗效果"是一种常见的交互设计手法，主要用于提升用户体验，特别是当用户需要关注特定弹出信息时。这种效果通过创建一个覆盖整个页面的半透明div层来实现，使得弹出窗口成为...
通过以上步骤和技巧，你可以创建一个基本的、使用`<div>`实现的弹出窗口。但记住，网页开发是一个不断学习和改进的过程，随着技术的发展，如Vue.js、React等前端框架提供了更高级的组件化和状态管理方法，可以更方便...
用JavaScript实现弹出窗口 用JavaScript实现弹出窗口 用JavaScript实现弹出窗口
其中，“弹出窗体”是指利用JavaScript在用户当前浏览的网页之外打开一个新的窗口或者对话框，显示额外的信息或功能。 #### 二、实现方式 ##### 1. 使用`window.open`方法 `window.open`是创建新窗口的核心函数，...