<html>
<head>
<style type="text/css">
#tranDiv {
position:absolute;
left:0px;
top:0px;
}
#tranDivBack {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:#000000;
filter:alpha(Opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}
#infoDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
text-align:center;
}
.pop_box {
background:#FFF;
padding:20px;
border:#008C00 8px solid;
}
</style>
<script language="javascript">
//弹出对话框，并使背景元素不可用
//var div_width = 464;
//var div_height = 445;
function showWindow(width,height){
location.href="#";
//width = div_width;
//height = div_height;
var windowstr= document.getElementById("popLayer").innerHTML;
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=100+"px";
document.getElementById("infoDiv").style.zIndex=10001;
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("tranDivBack").style.zIndex=10000;
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}
</script>
</head>
<!--层遮罩部分-->
<div id="tranDiv" style="display:none;">
<div id="tranDivBack"></div>
<div id="infoDiv"></div>
</div>
<!--层遮罩部分结束-->
<!--弹出层-->
<div id="popLayer" style="display:none;">
<div class="pop_box">
用户名：<input type="text" name="name">
用户名：<input type="text" name="name">
用户名：<input type="text" name="name">
用户名：<input type="text" name="name">
用户名：<input type="text" name="name">
<button onClick="closeWindow();">关闭</button>
</div>
</div>
<a href="javascript:showWindow(400,300);">点击此处看看</a>
</html>
分享到：
相关推荐
JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子,弹出DIV层窗口 JS+DIV以层代替弹出窗口的例子...
在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`test.html`文件可能包含了用于展示弹出窗口的基础HTML元素。通常，一个基本的HTML结构会包括...
alert功能的扩展版，可以弹出一个以DIV层中元素代码为内容的提示窗口，也可以直接弹出文字信息。 提供了两个JS方法： （1）showAlert(info); 函数说明：info参数可以是字符串信息，也可以是html元素代码。 （2）...
在网页设计中，"弹出div层"是一个常见的交互元素，用于显示通知、表单、消息或其他内容。这种设计技术可以提升用户体验，因为它允许在不离开当前页面的情况下展示额外信息。"Test"这个标题暗示我们将探讨一个关于弹...
在给定的标题和描述中提到的"弹出DIV层窗口"是指使用HTML、CSS和JavaScript实现的浮动窗口效果。这种技术常用于创建模态对话框或轻量级的弹出窗口。 首先，让我们深入理解HTML部分： ```html <!DOCTYPE ...
基本的网页弹出div层效果，带关闭按钮。div层浮动在原网页之上。
在JavaScript中，弹出div层并实现锁屏功能是一项常见的前端交互设计，它通常用于创建模态对话框、警告提示或者加载等待效果。这个过程涉及到DOM操作、CSS样式控制以及JavaScript事件处理。下面我们将深入探讨如何...
**jQuery弹出div层窗口** 在网页开发中，jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用...
弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏弹出div层且锁屏
网页弹出div层的技术在网页开发中非常常见，主要用于创建模态对话框、提示信息或者加载新内容。这种技术利用JavaScript进行实现，结合HTML和CSS，可以为用户提供丰富的交互体验。下面将详细介绍如何使用js-...
这就是"Javascript实现弹出DIV层并锁屏"所涉及的主要内容。 首先，让我们了解一下什么是DIV。在HTML中，`<div>`元素是“division”的缩写，用于对网页内容进行区域划分。通过CSS样式，我们可以对这些DIV进行定位、...
在页面加载后或者点击页面的某个链接时弹出一个div层，同时页面的其他地方会变灰
本文将深入探讨如何使用jQuery实现一个“鼠标悬停在按钮上弹出DIV层页面，鼠标离开后层消失”的功能，这通常被称为“浮动提示框”或“悬停弹窗”。这个功能在很多网站，如当当网，被广泛应用来展示更多的信息或者...
总之，“地图点击弹出div层”是一个常见的地图交互功能，它利用了地图API的覆盖物机制和事件监听技术，为用户提供了一种直观的信息展示方式。通过熟练掌握这些知识点，开发者可以构建出更加丰富、个性化的地图应用。
在网页开发中，"div 弹窗 数据预览效果和弹出div层效果"是一个常见的需求，用于展示信息、提示用户或进行交互操作。这里提到的压缩包包含两个实现方式：一个基于div和JavaScript，另一个基于div和jQuery。这两种方法...
<title>js弹出div层示例 #popup { display: none; position: absolute; /* 可以设置为fixed，使其相对于浏览器窗口定位 */ width: 300px; padding: 20px; background-color: #fff; border: 1px solid #ccc...
一个不错的遮罩效果的弹出div层 适用于Asp。net 美观大方 js编写
当我们说“弹出DIV层”，我们通常指的是通过JavaScript或jQuery使这个`<div>`元素变得可见，以显示一些信息，比如提示、表单或任何其他内容。 在jQuery中，实现弹出DIV层的基本步骤包括以下几点： 1. **选择器**: ...
在这个名为“JQuery弹出div层窗口”的项目中，开发者提供了一个使用jQuery实现的弹出对话框功能，这个功能允许用户在不离开当前页面的情况下显示额外的信息或者进行交互。 首先，我们来理解`index.html`文件。这是...
本项目"AJAX动态加载无限级树和弹出div层"正是利用这一特性，实现了动态加载无限层级的树形结构数据以及通过JavaScript弹出div层来展示相关信息。 首先，我们来详细探讨AJAX。AJAX的核心是XMLHttpRequest对象，它...