下面是一个JavaScript代码实现的弹出层效果
<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:10px;
border:#666 8px solid;
}
</style>
<script language="javascript">
function showWindow(width,height){
location.href="#";
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+"px";
document.getElementById("infoDiv").style.height=height+"px";
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";
}
function changeVal() {
var time = document.getElementById("time");
time.value = "";
//alert(document.getElementById("link").innerHTML);
}
function getVal() {
var time = document.getElementById("time").value;
var patrn = /[0-9]/;
if(!patrn.exec(time)) {
alert("内容只能为整数，请重新输入！");
return false;
}
if(time <= 0) {
alert("设置时间应该大于0，请重新输入！");
return false;
}
document.getElementById("link").innerHTML = time;
//alert(document.getElementById("link").innerHTML);
document.getElementById("timeVal").value = document.getElementById("link").innerHTML;
alert(document.getElementById("timeVal").value);
closeWindow();
}
</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" value="小时（整数）" id="time" name="time" onClick="return changeVal();" /><br/>
<input type="button" value="确定" onClick="return getVal();"/>
<input type="button" value="关闭" onClick="return closeWindow();" />
</div>
</div>
测试程序：<a id="link" href="javascript:showWindow(250,60);">时间</a>
<input type="hidden" id="timeVal" value="0" />
</html>
注：document.getElementById("infoDiv").style.width在Firefox中必须为下面样式：
document.getElementById("infoDiv").style.width="180px"
必须加双引号
分享到：
相关推荐
总结：通过以上步骤，我们可以在JSP页面上使用JavaScript实现弹出层的显示、隐藏以及缓冲效果。弹出层是网页交互设计中的重要元素，合理的应用可以提高用户体验，而JavaScript的动态特性使得实现这些功能变得简单且...
本文将深入探讨如何使用JavaScript来实现弹出层效果，包括各种不同的弹出层类型及其应用场景。 首先，我们需要了解弹出层的基本结构。一个弹出层通常包含以下几个部分：背景遮罩层、内容容器、关闭按钮（可选）以及...
本教程将详细介绍如何使用JavaScript实现弹出层的效果。 首先，我们需要理解弹出层的基本结构。一个弹出层通常包括一个触发器（如按钮）和一个隐藏的容器（包含要显示的内容）。当用户点击触发器时，隐藏的容器会以...
本主题将深入探讨如何使用JavaScript实现一个仿腾讯登录框的弹出层效果，兼容主流浏览器。这个效果旨在提供与腾讯登录界面相似的用户体验，增加网站的专业感和互动性。 首先，我们要创建HTML结构，这将作为弹出框的...
在标题"JavaScript实现弹出层的移动 兼容IE和Firefox"中，我们可以看到主要涉及的是JavaScript动态改变HTML元素位置的技术，并且这个技术已经考虑到了浏览器兼容性问题，包括Internet Explorer（IE）和Mozilla Fire...
本篇文章将深入探讨如何使用JavaScript实现弹出层，包括点击触发、滑过触发、动画效果以及自定义函数回调。 1. **点击触发的弹出层**： 当用户点击页面上的特定元素（如按钮、链接等）时，JavaScript可以监听这些...
在这个名为"js实现弹出层Lightbox图片画廊插件spotlight.js.zip"的压缩包中，我们很显然可以找到用于创建Lightbox效果的源代码。 Spotlight.js的核心功能包括： 1. **图片预加载**：为了提供流畅的用户体验，...
以上就是使用JavaScript实现弹出层的基本步骤。在实际开发中，你可能还需要处理更多细节，如防止页面滚动、调整弹出层位置以适应窗口大小变化等。通过不断实践和学习，你可以创造出更多富有创意的弹出层效果，提升...
本文将深入探讨多种JavaScript实现弹出层的方式，帮助你更好地理解和运用这些技术。 1. **基本Alert对话框** JavaScript内置的`alert()`函数是最基础的弹出层形式，它会显示一个包含消息的单行文本框，并有一个...
二、JavaScript实现弹出层 1. DOM操作：JavaScript通过Document Object Model (DOM) 来操作网页元素。创建弹出层可以通过动态创建HTML元素（如div）并添加到页面中，然后设置其样式（如定位、透明度等）来实现。 2. ...
在"js弹出div获取弹出层中文本值"这个场景中，我们将讨论如何利用JavaScript实现这一功能，并确保它在主流浏览器如IE6+、Firefox（ff）等上兼容。 首先，我们需要创建一个可隐藏的div元素作为弹出层，然后在需要的...
在JS中，实现弹出层通常涉及以下步骤： 1. **HTML结构**：首先，需要在HTML中定义弹出层的结构。这可能是一个div元素，设置为隐藏状态，包含弹出层的所有内容，如标题、文本、按钮等。 2. **CSS样式**：为了使弹出...
JavaScript，作为浏览器端的主要脚本语言，能够动态地修改HTML和CSS，从而实现弹出层的动态显示和隐藏。 描述中提到的“NULL”可能意味着没有提供具体的实现细节，但我们可以通过常规的JS弹出层实现方法进行解释。 ...
实现弹出层的JavaScript库有很多，比如jQuery UI的Dialog、Bootstrap的Modal，以及纯JavaScript的SweetAlert2等。"FineMessBox"可能提供了一种更轻量级或特定需求的解决方案。 在实际项目中，我们需要根据需求来...
总的来说，使用JavaScript实现弹出层并锁屏功能，需要结合HTML、CSS和JavaScript三者，通过DOM操作、事件处理和样式控制，为用户提供一个既美观又实用的交互界面。在项目开发过程中，可以不断优化和完善，以满足不同...
4. **CSS样式控制**：通过JavaScript修改元素的CSS属性，可以实现弹出层的动画效果，比如淡入淡出、滑动等。 5. **模态对话框**：实现弹出层的核心是创建一个在主内容上方显示的覆盖层，使其看起来像是独立于页面的...
实现弹出层嵌套需要精心处理层次结构和事件管理，确保各个弹出层之间的关系清晰，关闭操作能够正确回退。 "简单好用的JS弹出层"很可能提供了以下核心功能： 1. **初始化与显示**：通过JS函数调用来创建和显示弹出...
"18种非常实用的js弹出层"集合提供了多种不同的实现方式，旨在帮助开发者在项目中创建功能丰富、用户体验良好的弹出层。下面，我们将深入探讨这些知识点。 首先，我们要理解什么是弹出层。弹出层是一种在主页面上...
JavaScript（简称JS）弹出层是一种常见的网页交互设计，它可以在用户与网页交互时弹出一个浮动窗口，显示额外的信息、提示或者进行某些操作。在网页开发中，弹出层通常用于实现模态对话框、警告提示、信息确认、表单...