用js背景变灰并且功能失效

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量2.4k 收藏
点赞数
文章标签： function div button javascript input email
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yxgxy1717/article/details/1830612
版权
     function G(id){
       return document.getElementById(id);
     };
     
    function GC(t){
       return document.createElement(t);
    };
   
    String.prototype.trim = function(){
              return this.replace(/(^/s*)|(/s*$)/g, '');
    };
   
    function isIE(){
          return (document.all && window.ActiveXObject && !window.opera) ? true : false;
    }
   
    function getBodySize(){
           var bodySize = [];
        with(document.documentElement) {
         bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;
         bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;
        }
           return bodySize;
    }
 
   
  function popCoverDiv(){
   if (G("cover_div")) {
    G("cover_div").style.display = '';
   } else {
    var coverDiv = GC('div');
    document.body.appendChild(coverDiv);
    coverDiv.id = 'cover_div';
   
    with(coverDiv.style) {
     position = 'absolute';
     background = '#CCCCCC';
     left = '0px';
     top = '0px';
     var bodySize = getBodySize();
     width = bodySize[0] + 'px'
     height = bodySize[1] + 'px';
     zIndex = 98;
     if (isIE()) {
      filter = "Alpha(Opacity=60)";
     } else {
      opacity = 0.6;
     }
    }
   }
}


只要引用上面的这些JS就可以了,在你弹出DIV或者POPUP的窗口前调用那个popCoverDiv();就可以完成你想要的效果了!


下面是一个很不错的实例:

用javascript实现用户登陆，注册，忘记密码；修改密码等页面功能；

效果弹出用户登陆框而且背景变灰功能实效；好似关闭windows时的页面效果。
例题代码如下（在ie和firefox中均能用）：
login.html文件内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript">
function G(id){
    return document.getElementById(id);
};
function GC(t){
   return document.createElement(t);
};
String.prototype.trim = function(){
          return this.replace(/(^/s*)|(/s*$)/g, '');
};
function isIE(){
      return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
     var loginDivWidth = 300;
var sign_in_flow = '<div style="background:#FF9900;">Login</div><div>e-mail:*</div><div>'
       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'
       + '</div><div>password:*</div><div><input type="password" id="sign_pwd" size="30"/>'
        + '</div><div><input type="button" value="login" οnclick="signFlow(1);" id="sign_button"/>   '
        + '   <input type="button" value="cancel" οnclick="cancelSign();"/></div>'
        + '<p><a href="javascript:loadSignUpFlow();">creat account</a>   '
        + 'or   <a href="javascript:loadForgetPwdFlow();">forget password</a></p>';
function loadSignInFlow(){
   G("sign_div").innerHTML = sign_in_flow;
    G("sign_email").focus();
};
var sign_up_flow = '<div style="background:#CCFF00;">Create New Account</div><div>e-mail:*</div><div>'
       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'
       + '</div><div>password:*</div><div><input type="password" id="sign_pwd" size="30"/>'
        + '</div><div>password again:*</div><div><input type="password" id="sign_repwd" size="30"/>'
        + '</div><div><input type="button" value="creat account" οnclick="signFlow(0);" id="sign_button"/> '
        + ' <input type="button" value="cancel" οnclick="cancelSign();"/></div>'
        + '<p><a href="javascript:loadSignInFlow();">login</a></p>';
function loadSignUpFlow(){
   G("sign_div").innerHTML = sign_up_flow;
    G("sign_email").focus();
};
function cancelSign(){
    G("sign_div").style.display = 'none';
    G("cover_div").style.display = 'none';
   document.body.style.overflow = '';
};
var forget_pwd_flow = '<div style="background:#FF99FF;">Forget Password</div><div>e-mail:*</div><div>'
       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'
        + '</div><div><input type="button" value="sent pwd to e_mail" οnclick="signFlow(2);" id="sign_button"/>   '
        + '   <input type="button" value="cancel" οnclick="cancelSign();"/></div>';
function loadForgetPwdFlow(){
   G("sign_div").innerHTML = forget_pwd_flow;
    G("sign_email").focus();
};
function checkEmail(){
   if((G("sign_email").value.indexOf('@')<=0)||(G("sign_email").value.indexOf('.')<=0)){
    return '<div style="color:#FF0000";">Sorry, unrecognized e_mail.</div>';
   }
   return '';
}
function checkPwd(){
   if(G("sign_pwd").value.trim() == ''){
    return '<div style="color:#FF0000";">Password field is required.</div>';
   }
   return '';
}
function checkRePwd(){
   if(G("sign_pwd").value.trim() != G("sign_repwd").value.trim()){
    return '<div style="color:#FF0000";">The specified passwords do not match.</div>';
   }
   return '';
}
function signFlow(isSignIn){
    var error = checkEmail();
    var htmlText = null;
    if (isSignIn == 1) {
     if (error == ''){
      error = checkPwd();
     }
     htmlText = sign_in_flow;
    } else if (isSignIn == 0) {
     if (error == ''){
      error = checkPwd();
      if (error == ''){
       error = checkRePwd();
      }
     }
     htmlText = sign_up_flow;
    } else if (isSignIn == 2) {
    htmlText = forget_pwd_flow;
    }
    var eMailValue = G("sign_email").value.trim();
   if (error == '') {
    } else {
    G("sign_div").innerHTML = error + htmlText;
    G("sign_email").value = eMailValue;
    }
};
function popCoverDiv(){
   if (G("cover_div")) {
    G("cover_div").style.display = '';
   } else {
    var coverDiv = GC('div');
    document.body.appendChild(coverDiv);
    coverDiv.id = 'cover_div';
    with(coverDiv.style) {
     position = 'absolute';
     background = '#CCCCCC';
     left = '0px';
     top = '0px';
     var bodySize = getBodySize();
     width = bodySize[0] + 'px'
     height = bodySize[1] + 'px';
     zIndex = 98;
     if (isIE()) {
      filter = "Alpha(Opacity=60)";
     } else {
      opacity = 0.6;
     }
    }
   }
}
function getBodySize(){
   var bodySize = [];
   with(document.documentElement) {
    bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;
    bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;
   }
   return bodySize;
}

function popSign(isLogin){
   if (G("sign_div")) {
    G("sign_div").style.display = '';
   } else {
    var signDiv = GC('div');
    document.body.appendChild(signDiv);
    signDiv.id = 'sign_div';
    signDiv.align = "center";
    signDiv.onkeypress = function(evt){
          var e = window.event?window.event:evt;
          if (e.keyCode==13 || e.which==13) {
           if (G("sign_button")) {
            G("sign_div").focus();
            G("sign_button").click();
           }
          }
         };
    with (signDiv.style) {
     position = 'absolute';
     left = (document.documentElement.clientWidth - loginDivWidth)/2 + 'px';
     top = (document.documentElement.clientHeight - 300)/2 + 'px';
     width = loginDivWidth + 'px';
     zIndex = 99;
     background = '#FFFFFF';
     border = '#66CCFF solid 1px';
    }
   }
   if(isLogin) {
    G("sign_div").innerHTML = sign_in_flow;
   } else {
    G("sign_div").innerHTML = change_pwd_flow;
   }
  
}
function popSignFlow(isLogin) {
   popCoverDiv();  
   popSign(isLogin);  
   document.body.style.overflow = "hidden";
     
      if(isLogin) {
       G("sign_email").focus();
      } else {
       G("old_pwd").focus();
      }
}
function changePwd(){
    var error = checkOldPwd();
    if (error == ''){
     error = checkPwd();
    }
   if (error == ''){
    error = checkRePwd();
   }

    var oldPwd = G("old_pwd").value.trim();
    var newPwd = G("sign_pwd").value.trim();
   if (error == '') {
     var url = basePath + "?q=tripuser/tripuser_change_pwd_ajax/" + oldPwd + "/" + newPwd;
     exeRequest(url, getSignText, null);
    } else {
    G("sign_div").innerHTML = error + change_pwd_flow;
    }
};
function checkOldPwd(){
   if(G("old_pwd").value.trim() == ''){
    return '<div style="color:#FF0000";">Old Password field is required.</div>';
   }
   return '';
}
var change_pwd_flow = '<div style="background:#33FFFF;">Change Your Password</div><div>old password:*</div><div>'
       + '<input type="password" id="old_pwd" size="30"/>'
       + '</div><div>new password:*</div><div><input type="password" id="sign_pwd" size="30"/>'
        + '</div><div>new password again:*</div><div><input type="password" id="sign_repwd" size="30"/>'
        + '</div><div><input type="button" value="change password" οnclick="changePwd();" id="sign_button"/> '
        + ' <input type="button" value="cancel" οnclick="cancelSign();"/></div>';

</script>
</head><body><div>
<input type="text" value="login"/><p>
<input type="button" οnclick="popSignFlow(1);" value="login"/>   
<input type="button" οnclick="popSignFlow(0);" value="change password"/></p>
</div></body></html>

yxgxy1717
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
4.print 显示颜色
qq_43756036的博客
11-24 376
print 显示颜色
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
蓝胖子的博客
02-24 1万+
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
Vue3 开发实战分享——打印插件 Print.js 的使用（Vue3 + Nodejs + Print.js 实战）以及 el-table 与 el-pagination 的深入使用（下）
热门推荐
黛琳ghz的博客，期待你的关注。
10-24 3万+
上一篇文章，我们主要介绍了打印插件 Print.js 的使用，包括介绍、了解到快速上手的过程，以及 Vue3 + Nodejs + Print.js 的实战练习，通过简单的例子复刻出实战中的应用场景和业务需求。其实之所以会有下篇的内容，是因为这个 Vue3 实战项目的前端用了 Element-Plus 这个 UI 框架，其中包括有表格、分页，在博主的之前（相关）文章中就已经开始用这套模板了，在此基础上和 Vue3 实战项目的延申上，我们来讲一下 el-table 与 el-pagination 的深入使用。
js window.print() 打印TD背景色
liangbao568的博客
08-31 1088
JS window.print()打印页面打印元素设置的背景色
vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）
qq_42571665的博客
10-12 1万+
实现纯前端的打印功能，可自定义打印样式，使用print-js实现，设置打印默认横纵向，设置打印默认缩放比，修改打印字体，修改背景色。
点击提交按钮后按钮变灰色不可用状态的三种方法
09-05
当点击提交后，提交按钮变灰色不可用，这样可有效防止重复提交，本代码就是实现这样一个功能
C#窗体最大化 最小化 关闭按钮灰色 失效改变功能
04-29
1.使窗体最大化，最小化或关闭按钮变为灰色； 2.改变窗体关闭按钮的功能 3.使关闭按钮失去作用 互动学习。。。。。
使用微信内嵌H5网页解决JS倒计时失效问题
10-20
最近参考项目开发，遇到这样一个需求将H5商城页面嵌套到公司微信公众号里，在开发遇到一个棘手的问题，js倒计时失效问题，怎么回事呢？下面说下我使用微信内嵌h5解决的这一问题，需要的朋友参考下吧
js放到head中失效的原因与解决方法
10-20
本文主要介绍了js放到head中有时候会失效的原因以及解决方法，具有很好的参考价值。下面跟着小编一起来看下吧
ISO26262功能安全MCU随机硬件失效安全机制
05-25
Safety mechanisms for random ECU hardware failures in compliance with ISO 26262 Volvo 发动机辅助制动相关从概念阶段到ST以及错误注入的案例。
JS变灰页面显示遮罩层登录窗口，使页面无法操作
08-14
JS变灰页面显示遮罩层登录窗口，使页面无法操作 JS变灰页面显示遮罩层登录窗口，使页面无法操作
浏览器打印不出背景 background-color
JasonAlonk的博客
12-17 2142
给要打印的背景的元素添加样式 -webkit-print-color-adjust: exact;
打印时显示背景色
k195514239的博客
11-26 352
<style type="text/css"> @@media print and (color) { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }} </style>
js页面背景色变灰色一例
heyihong0208的专栏
03-30 1948
 提示信息框a{ color:#000; font-size:12px;text-decoration:none}a:hover{ color:#900; text-decoration:underline}body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=
网站指定日期变灰色JS代码
qq_31888837的博客
11-27 766
这个代码可以指定日期网站变灰色页面，网站调用JS代码文件就可以实现或者在后台放置代码块。
js 将图片置灰_让网页图片变灰色的三种方法
weixin_39770416的博客
12-22 2467
我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易，因为浏览器有差异。1、CSS Filter使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。现在,过滤器属性是CSS3规范的一部分,并支持在一...
前端怎么实现那种整体页面变灰色
zouyang920的博客
12-22 2999
1.所有网站页面变灰色。。。 方法一 html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } grayscale 英语的意思
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 864
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 118
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
threejs发光背景透明失效
01-19
在使用three.js时，设置发光背景并使其透明可能会出现失效的情况。这可能是由于以下原因： 1. 材质设置问题：在使用three.js时，我们可以通过设置材质的透明度属性来控制物体的透明度。如果设置背景材质的透明度...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值