跟我做背景变暗,弹出提示层的功能,而且增加了对Select对象的支持
其实很简单,我也是学习别人的代码学习来的,
注意:密码是123
<html>
<head>
</head>
<body>
<p align="center">
<script>...
function locking()...{
document.all.ly.style.display="block";
document.all.ly.style.width=document.body.clientWidth;
document.all.ly.style.height=document.body.clientHeight;
document.all.Layer2.style.display='block';
}
function Lock_CheckForm(theForm)...{
if(theForm.P_USERPASS.value=='')...{alert("错误:请输入你的用户密码!");theForm.P_USERPASS.focus();return false;}
if(theForm.P_USERPASS.value !='123')...{alert("错误:密码错误!");theForm.P_USERPASS.value='';theForm.P_USERPASS.focus();return false;}
else...{document.all.ly.style.display='none';document.all.Layer2.style.display='none';}
return false;
}
</script>
<img src=http://www.shangdu.com/images/517s1.gif>
</p>
<p align="center">
<INPUT TYPE="button" value="系统锁定" onclick="locking()">
</p>
<div id="ly" style="position:absolute;top:0px;FILTER: alpha(opacity=60);background-color:#777; z-index:2; left: 0px;display:none;"> </div>
<!-- 浮层框架开始 -->
<div id="Layer2" align="center" style="position:absolute; z-index:3; width: 540; height:170px;left:expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);background-color:#fff;display:none;" valign="center">
<form method="POST" action="" onsubmit="return Lock_CheckForm(this);">
<TABLE width=540 height=170 border=0 cellpadding=0 cellspacing=0 style="border:0 solid #e7e3e7;border-collapse: collapse">
<TR>
<TD style="background-color:#73A2d6;color:#fff;padding-left:4px;padding-top:2px;font-weight:bold;font-size:14px;" height=27 valign="center">[ 警 告 ]</TD>
</TR>
<TR>
<TD align="center" valign="center">请输入解除锁定密码<p><input type="text" name="P_USERPASS" size="20"></TD>
</TR>
<TR>
<TD height=30 align="center"><INPUT type="submit" value=" 确 定 "></TD>
</TR>
</TABLE>
</form>
</div>
<!-- 浮层框架结束 -->
</body>
</html>
插入一个代码吧,方便你们用;)没办法,不能上传文件,还是贴代码吧;(
方法二 popup的方式
<script language="JavaScript">...
<!--
var oPopup=window.createPopup();
var oPopBody=oPopup.document.body;
var colorArr=["#F7F7F7","#E7E7E7","#D7D7D7","#D4D4D4","#BCBCBC","#ACACAC"];
var i=0;
var iMaxLength=6;
var timer=null;
function showPopup()...{
var oBody=document.body;
oPopBody.attachEvent("oncontextmenu",cancelEvent);
oPopBody.bgColor="#FFFFFF";
var strHTML=""
strHTML+='<center><div align="center" style="border:solid 2px #00FFFF;valign:middle; width:400; height:200">请您选中要操作的信件!<input type="button" value="确定" onclick="parent.hidePopup()"></div></center>';
oPopBody.innerHTML=strHTML;
oPopup.show(0,0,oBody.clientWidth,oBody.clientHeight,document.body);
chgBgcolor();
}
function chgBgcolor()...{
if(i<iMaxLength)...{
oPopBody.bgColor=colorArr[i++];
timer=setTimeout(chgBgcolor,100);
}
else...{
clearTimeout(timer);
i=0;
}
}
function cancelEvent()...{
return false;
}
function hidePopup()...{
oPopup.hide();
}
//-->
</script>
<input type="button" onclick="showPopup()" value="操作有误">
再加一个方法,带渐变效果的
<script language="JavaScript">...
<!--
var oPopup=window.createPopup();
var oPopBody=oPopup.document.body;
var colorArr=["#F7F7F7","#E7E7E7","#D7D7D7","#D4D4D4","#BCBCBC","#ACACAC"];
var i=0;
var iMaxLength=6;
var timer=null;
function showPopup()...{
var oBody=document.body;
oPopBody.attachEvent("oncontextmenu",cancelEvent);
oPopBody.bgColor="#FFFFFF";
var strHTML=""
strHTML+='<center><div align="center" style="border:solid 2px #00FFFF;valign:middle; width:400; height:200">请您选中要操作的信件!<input type="button" value="确定" onclick="parent.hidePopup()"></div></center>';
oPopBody.innerHTML=strHTML;
oPopup.show(0,0,oBody.clientWidth,oBody.clientHeight,document.body);
chgBgcolor();
}
function chgBgcolor()...<sp>
分享到:
相关推荐
在网页设计中,"input触发弹出层,实现select效果"是一种常见的交互设计技术,它旨在提供一个更友好、更具可定制性的用户体验。通常,原生的HTML `select` 元素虽然功能齐全,但其样式和交互方式往往受到浏览器默认...
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
本案例聚焦于使用`div`元素实现弹出层的操作,这是一种轻量级且灵活的方法,适用于各种场景,如提示信息、表单提交、图像预览等。下面我们将详细探讨如何利用HTML、CSS和JavaScript来创建和控制弹出层。 首先,`div...
本文将深入探讨两个常见的前端优化技术:动态过滤填充input框和用弹出层替换select框。 首先,动态过滤填充input框是一种提升用户输入效率的策略。在用户在input框中输入时,系统实时根据输入内容动态过滤并显示...
在网页开发中,`select`下拉框是常见的用户交互元素,用于提供一系列选项供用户选择。然而,随着用户体验需求的提升,单纯的下拉选择已无法满足所有场景,特别是当选项众多时。为了提高用户的操作效率,我们常常需要...
jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器
尤其是对于IE6,zDialog解决了弹出层被select控件穿透的问题,这在很多其他弹出层插件中是常见的问题。 ### 2. 简洁的依赖 zDialog的一大优点是其简洁的依赖。无需额外的CSS文件,只需引入`Dialog.js`脚本,就可以...
JavaScript 实现弹出 DIV 层同时页面背景渐变成半透亮效果是一种常见的网页交互设计,它通常用于创建对话框、提示信息或者用户确认操作等场景。这种效果通过 JavaScript 控制 DOM 元素的动态变化来达成,使得用户...
点击弹出窗口层,并且背景变暗渐变.htm 设定时间弹出窗口.htm 打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示,刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口....
在这个项目中,“弹出有遮罩的拖动层,简单模拟select(未做界面)”是一个实例,它展示了如何利用这些技术实现一个功能性的UI组件。 首先,让我们详细了解这个项目的组成部分: 1. **遮罩层**:遮罩层是一种常见...
在现代Web应用中,为了提升用户体验,我们经常需要对其进行增强,比如增加搜索功能,使得用户在大量选项中能更高效地找到所需内容。标题“select增加搜索框”和描述中提到的“在select框中添加新的样式searchClass”...
不同的浏览器对select控件的title属性的支持不同,因此我们需要使用JavaScript来模拟title提示属性的行为。通过使用JavaScript和HTML层,我们可以实现跨浏览器的select控件title提示属性,并提供了一个更加用户友好...
首先,弹出层通常指的是在网页上动态显示或隐藏的元素,如模态框、提示框或下拉菜单。在HTML中,我们可以创建一个隐藏的div元素作为弹出层,通过CSS设置其初始状态为不可见。例如: ```html ;"> <!-- 城市选择的...
在网页开发中,jQuery弹出层(也称为模态窗口或对话框)是一种常见的交互设计技术,用于在用户与页面的其他部分互动时提供额外的信息或功能。这种技术可以用于登录、注册、确认操作、显示详细信息等多种场景,极大地...
在网页开发中,"select下拉带模糊搜索功能"是一个常见的需求,特别是在用户需要从大量选项中快速选择某一特定项时。这个功能提高了用户体验,使查找和选择变得更加便捷。本项目通过HTML、JavaScript(可能包括jQuery...
"仿招聘网站的弹出层选择器"是一个专为此目的设计的功能组件,它模仿了常见招聘网站上的弹出式选择功能,特别是针对城市联动的选择器,帮助用户快速定位到他们感兴趣的职位信息。 弹出层选择器是一种常见的网页UI...
本文将详细探讨一个特定的问题,即在Internet Explorer 6(IE6)环境下,使用JQuery EasyUI时,弹出窗口(对话框)无法正确遮挡页面上的select组件,以及如何解决这一问题。 JQuery EasyUI是一个基于jQuery的UI库,...
接下来,我们可以通过CSS对这个弹出层进行美化,如设置背景色、边框、阴影等,使其在页面上显得更加吸引人。此外,还可以添加一些交互效果,比如点击选项时的高亮或动画。 为了实现弹出层的显示和隐藏,我们可以...
本文将围绕“select option”及其相关的鼠标提示功能进行详细讲解。 "Select option"通常指的是HTML中的<select>元素,它用于创建一个下拉列表,用户可以从中选择一个或多个选项。在网页或应用开发中,这种组件广泛...