演示地址：
引用
http://www.css88.com/demo/smallwindow/exp.html
具体代码：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出小窗口示例</title>
</head>
<body>
<a href="javascript:void(0);" onclick="show();return false;">点击弹出小窗口 </a>
<script type="text/javascript">
var isshow=0;//0小窗口没有显示，1小窗口已显
function creatediv()
{
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=505;//提示窗口的高度
var sWidth,sHeight;
if( top.location == self.location )
doc = document;
var docElement = doc.documentElement;
sWidth=docElement.clientWidth;
sHeight = docElement.clientHeight;
if( docElement.scrollHeight > sHeight )
sHeight = docElement.scrollHeight;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.left="0";
bgObj.style.background="#777";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div");
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.background="#fff";
msgObj.style.marginLeft = "-200px" ;
msgObj.style.top = (document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.zIndex = "10001";
msgObj.innerHTML = "这是弹出的小窗口！<br /><a href=\"javascript:void(0);\" onclick='delWinD();return false;'>点我关闭窗口</a>";
document.body.appendChild(msgObj);
}
function delWinD()
{
document.getElementById("bgDiv").style.display="none";
document.getElementById("msgDiv").style.display="none";
isshow=0;
}
function show()
{
isshow=1;
if(!document.getElementById("msgDiv"))//小窗口不存在
creatediv();
else
{
document.getElementById("bgDiv").style.display="";
document.getElementById("msgDiv").style.display="";
document.getElementById("msgDiv").style.top=(document.documentElement.clientHeight/2+document.documentElement.scrollTop-252)+"px";
}
}
</script>
</body>
分享到：
相关推荐
- **核心知识点**：通过 JavaScript 代码创建一个新窗口或弹出窗口，并能够控制其大小、位置以及各种浏览器工具栏的显示与隐藏等属性。 #### 标签：弹出小窗口 - **关键词提取**：此标签表明文章的主题是围绕“弹出...
JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层 JS+HTML非常漂亮的 弹出小窗口 div弹出层
在网页开发中，JS常用于创建各种弹出窗口，以实现如提示信息、用户输入对话框或者自定义内容窗口等功能。本篇文章将详细探讨JS弹出窗口的实现方式和相关知识点。 首先，JS中最常见的弹出窗口是`alert()`函数。它会...
- `$.fn.alert()`, `$.fn.confirm()`, `$.fn.prompt()`：这些是jQuery模拟原生JavaScript弹出对话框的方式，增强了样式和交互性。 4. **动态加载内容**：使用Ajax技术，可以在不刷新整个页面的情况下，动态地向弹...
标题“JS弹出一个超酷的小窗口”明确指出本篇将探讨如何利用JavaScript（简称JS）来创建一个具有视觉吸引力的弹出窗口。在现代网页设计中，弹出窗口常用于展示额外信息、广告或用户交互提示等场景，而使用JS可以使...
总结，创建一个简单的JavaScript弹出窗口涉及HTML结构的构建、CSS样式的设定以及JavaScript事件处理的编写。通过合理组合这些元素，我们可以创建出既有视觉吸引力又具有良好交互性的弹出窗口。在这个案例中，"弹出...
在网页开发中，自定义js弹出窗口，也被称为弹出层或对话框，是一种常见的交互设计技术。这种技术允许开发者在用户与页面交互时显示额外的信息或功能，而不会中断主页面的工作流程。在本教程中，我们将深入探讨如何...
在探讨“js自动弹出窗口下来菜单效果”的知识点时，我们不仅关注JavaScript代码本身，还应当深入了解其背后的逻辑与应用场景。这段代码展示了如何利用JavaScript创建一个动态下拉菜单，并在用户选择菜单项时自动打开...
- 弹出窗口应有明确的关闭按钮，同时考虑无障碍性（accessibility），如添加`aria`属性，确保屏幕阅读器用户也能正常操作。 通过以上知识点的综合运用，我们可以实现"点击弹出小窗口"的功能，提供良好的用户交互...
JavaScript弹出新窗口并控制窗口移动到指定位置的方法知识点： 1. window.open()函数的使用：window.open()是JavaScript的一个内置函数，用于打开一个新的浏览器窗口或标签页。该函数一般包含三个参数：要加载的URL...
在JavaScript（JS）中，弹出页面和弹出窗口是两种常见的用户交互方式，它们能够提供额外的信息或者增强用户体验。本文将深入探讨如何利用JS实现这两种功能。 首先，"弹出页面"通常指的是在一个新浏览器窗口中打开一...
3. **JavaScript功能**：JS是实现模态窗口弹出和关闭的核心。你可以通过添加事件监听器来触发模态窗口，比如点击按钮、链接或者其他元素。同时，还需要编写代码来控制模态窗口的显示和隐藏，比如更改`display`属性或...
标题中的“功能强大的JS弹出窗口”指的是利用JavaScript实现的各种弹出对话框功能，这些对话框能够增强用户体验，提供丰富的交互方式。 在描述中提到的弹出窗口js代码，它提供了多种弹出效果，让我们一一解析： 1....
在JavaScript（JS）开发中，有时我们需要创建可交互的用户界面元素，比如弹出窗口。在Web应用中，Div（Division）元素常被用来作为页面布局的容器，而通过JavaScript，我们可以将Div转换为可弹出且可拖动的窗口，以...
在ASP.NET应用中，结合JavaScript技术，可以创建出灵活且用户体验良好的弹出窗口。本文将详细介绍如何在ASP.NET环境中使用JS实现弹出式窗口，并通过提供的DEMO文件进行解析。 首先，我们需要理解基础的HTML和...
在IT行业中，"点击按钮弹出窗口"是一个常见的交互设计技术，主要应用于...在Web开发中，前端框架如Bootstrap、Vue.js或React.js也提供了更便捷的方法来创建弹出窗口，这些框架通常封装了弹出框组件，简化了开发过程。
### JavaScript弹出窗口知识点总结 #### 一、概述 JavaScript是一种广泛使用的脚本语言，它在前端开发中占据着极其重要的地位。通过JavaScript，开发者可以实现网页与用户的交互功能，其中弹出窗口就是一种常见的...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它...总的来说，JavaScript弹出DIV层窗口实例是网页交互设计中常见的功能，通过理解和实践，我们可以创建出各种自定义的弹出窗口效果，提升网站的用户体验。
总结，"js弹出窗口、弹出层"是网页交互中的重要元素，涉及到了JavaScript的DOM操作、事件处理、样式控制等多个方面。理解并掌握如何创建和使用弹出层，对于提升网页的用户体验具有重要意义。"FineMessBox"可能提供了...