跟我做背景变暗,弹出提示层的功能,而且增加了对Select对象的支持

简介: 跟我做背景变暗,弹出提示层的功能,而且增加了对Select对象的支持 其实很简单,我也是学习别人的代码学习来的, 注意:密码是123 <html>     <head>     </head>     <body>     <p   align="center">     <script>...     fun

跟我做背景变暗,弹出提示层的功能,而且增加了对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" > [ &nbsp; &nbsp; &nbsp; ] </ 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(){   
  
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 ="操作有误" >

 

 

 

相关文章
layer根据内容动态改变窗口高度
layer根据内容动态改变窗口高度
180 0
|
4月前
|
图形学
小功能⭐️Unity自动更改文本框高度,以显示全部文本
小功能⭐️Unity自动更改文本框高度,以显示全部文本
|
4月前
|
存储 开发框架 前端开发
在Winform分页控件中集成保存用户列表显示字段及宽度调整设置
在Winform分页控件中集成保存用户列表显示字段及宽度调整设置
|
7月前
|
JSON 定位技术 数据格式
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(下)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
71 0
|
7月前
|
JavaScript 前端开发 定位技术
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)(上)
HTML新特性【账号和获取密钥、初始化、变更地图类型、添加控件、改变控件位置、添加覆盖物、自定义标注图标、添加文本标注】(四)-全面详解(学习总结---从入门到深化)
62 0
|
敏捷开发 前端开发 开发者
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
【RaETable】🚀🚀🚀告别Form,RaETable表格列宽度支持拖动调整了,附带原理说明
【分享】下拉选项,远程获取数据,根据条件设置颜色,并按颜色排序
有时候需要用下拉选项来只管展示数据的(库存)剩余情况,我拿宜搭下拉选择组件的颜色属性来做展示(大家可以举一反三)
434 1
鼠标可控的表格滑动(左右)demo效果示例(整理)
鼠标可控的表格滑动(左右)demo效果示例(整理)
|
容器
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
101 0