`
xzknet
  • 浏览: 309615 次
  • 性别: Icon_minigender_1
  • 来自: 河南
文章分类
社区版块
存档分类
最新评论

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

阅读更多

跟我做背景变暗,弹出提示层的功能,而且增加了对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()...<sp>
分享到:
评论

相关推荐

    input触发弹出层,实现select 效果

    在网页设计中,"input触发弹出层,实现select效果"是一种常见的交互设计技术,它旨在提供一个更友好、更具可定制性的用户体验。通常,原生的HTML `select` 元素虽然功能齐全,但其样式和交互方式往往受到浏览器默认...

    jQuery 弹出层 浮动遮罩层 提示框 并随页面滚动而滚动

    jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层&lt;/div&gt; 并随页面...

    弹出层案例(针对层div的操作)

    本案例聚焦于使用`div`元素实现弹出层的操作,这是一种轻量级且灵活的方法,适用于各种场景,如提示信息、表单提交、图像预览等。下面我们将详细探讨如何利用HTML、CSS和JavaScript来创建和控制弹出层。 首先,`div...

    动态过滤填充input框和用弹出层替换select框

    本文将深入探讨两个常见的前端优化技术:动态过滤填充input框和用弹出层替换select框。 首先,动态过滤填充input框是一种提升用户输入效率的策略。在用户在input框中输入时,系统实时根据输入内容动态过滤并显示...

    select下拉框添加搜索功能

    在网页开发中,`select`下拉框是常见的用户交互元素,用于提供一系列选项供用户选择。然而,随着用户体验需求的提升,单纯的下拉选择已无法满足所有场景,特别是当选项众多时。为了提高用户的操作效率,我们常常需要...

    jquery select日历选择器点击select框弹出日期选择器

    jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器 jquery select日历选择器点击select框弹出日期选择器

    zDialog是一个很实用的jquery弹出层

    尤其是对于IE6,zDialog解决了弹出层被select控件穿透的问题,这在很多其他弹出层插件中是常见的问题。 ### 2. 简洁的依赖 zDialog的一大优点是其简洁的依赖。无需额外的CSS文件,只需引入`Dialog.js`脚本,就可以...

    JavaScript实现弹出DIV层同时页面背景渐变成半透亮效果_.docx

    JavaScript 实现弹出 DIV 层同时页面背景渐变成半透亮效果是一种常见的网页交互设计,它通常用于创建对话框、提示信息或者用户确认操作等场景。这种效果通过 JavaScript 控制 DOM 元素的动态变化来达成,使得用户...

    js特效,各种页面弹出浮动

    点击弹出窗口层,并且背景变暗渐变.htm 设定时间弹出窗口.htm 打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示,刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口....

    弹出有遮罩的拖动层,简单模拟select(未做界面)

    在这个项目中,“弹出有遮罩的拖动层,简单模拟select(未做界面)”是一个实例,它展示了如何利用这些技术实现一个功能性的UI组件。 首先,让我们详细了解这个项目的组成部分: 1. **遮罩层**:遮罩层是一种常见...

    select 增加搜索框

    在现代Web应用中,为了提升用户体验,我们经常需要对其进行增强,比如增加搜索功能,使得用户在大量选项中能更高效地找到所需内容。标题“select增加搜索框”和描述中提到的“在select框中添加新的样式searchClass”...

    js下用层来实现select的title提示属性.docx

    不同的浏览器对select控件的title属性的支持不同,因此我们需要使用JavaScript来模拟title提示属性的行为。通过使用JavaScript和HTML层,我们可以实现跨浏览器的select控件title提示属性,并提供了一个更加用户友好...

    js弹出层 城市切换效果

    首先,弹出层通常指的是在网页上动态显示或隐藏的元素,如模态框、提示框或下拉菜单。在HTML中,我们可以创建一个隐藏的div元素作为弹出层,通过CSS设置其初始状态为不可见。例如: ```html ;"&gt; &lt;!-- 城市选择的...

    Jquery弹出层

    在网页开发中,jQuery弹出层(也称为模态窗口或对话框)是一种常见的交互设计技术,用于在用户与页面的其他部分互动时提供额外的信息或功能。这种技术可以用于登录、注册、确认操作、显示详细信息等多种场景,极大地...

    select下拉带模糊搜索功能

    在网页开发中,"select下拉带模糊搜索功能"是一个常见的需求,特别是在用户需要从大量选项中快速选择某一特定项时。这个功能提高了用户体验,使查找和选择变得更加便捷。本项目通过HTML、JavaScript(可能包括jQuery...

    仿招聘网站的弹出层选择器.7z

    "仿招聘网站的弹出层选择器"是一个专为此目的设计的功能组件,它模仿了常见招聘网站上的弹出式选择功能,特别是针对城市联动的选择器,帮助用户快速定位到他们感兴趣的职位信息。 弹出层选择器是一种常见的网页UI...

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    本文将详细探讨一个特定的问题,即在Internet Explorer 6(IE6)环境下,使用JQuery EasyUI时,弹出窗口(对话框)无法正确遮挡页面上的select组件,以及如何解决这一问题。 JQuery EasyUI是一个基于jQuery的UI库,...

    div弹出层实现单选功能

    接下来,我们可以通过CSS对这个弹出层进行美化,如设置背景色、边框、阴影等,使其在页面上显得更加吸引人。此外,还可以添加一些交互效果,比如点击选项时的高亮或动画。 为了实现弹出层的显示和隐藏,我们可以...

    select option,鼠标移到哪个选向就给出相应的鼠标提示

    本文将围绕“select option”及其相关的鼠标提示功能进行详细讲解。 "Select option"通常指的是HTML中的&lt;select&gt;元素,它用于创建一个下拉列表,用户可以从中选择一个或多个选项。在网页或应用开发中,这种组件广泛...

Global site tag (gtag.js) - Google Analytics