实现点击按钮，弹出登录页面，原页面变暗代码

最新推荐文章于 2021-03-18 18:34:10 发布
最新推荐文章于 2021-03-18 18:34:10 发布
阅读量3.3k 收藏 3
点赞数
文章标签： input js JS 原页面变暗代码 弹出登录页面 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaodenanhai/article/details/8156776
版权

<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>
  </p>

  <p align="center">
   <INPUT TYPE="button" value="屏幕锁定" οnclick="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="ss.htm" οnsubmit="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>


 

xiaodenanhai
关注
js+css实现点击导航条“登录”弹出登录框界面
杉楂的博客
12-13 1万+
依旧是项目的登录问题，不过这次是界面。 实现弹出页面的效果还可以使用如bootstrap模态框一类的javascript插件，不过这里使用的是js+css简单实现的效果。 首先是导航条的“登录”： nav-login" href="javascript:;">登录 接着是login表单界面： login-form"> × 用户登录 用户名 密码
js制作带有遮罩弹出层实现登录注册表单特效代码分享
10-23
主要介绍了js制作带有遮罩弹出层实现登录注册表单代码特效，推荐给大家，有需要的小伙伴可以参考下。
弹出登录页面，背景变暗
10-09
弹出登录页面，背景变暗 弹出登录页面，背景变暗 弹出登录页面，背景变暗
点击登录按钮，弹出一个登录框
weixin_44000439的博客
03-03 1万+
点击登录按钮，弹出一个登录框 首先将登录框写在一个div块里，里面放上登录框所需的各种信息，比如用户名、密码等，并将CSS样式里的display设置成none。然后在你的前端页面，比如index.html或者index.jsp中，有一个登录按钮，在这个按钮上onclick一个函数，这个函数写在.js文件中，其作用是设置登录框所在div的显示与隐藏，默认状态下，是隐藏的。当点击登录按钮时，这...
点击登录按钮，弹出登录对话框
03-22
点击登录按钮，弹出局部显示的登录界面，html+css+js
点击登录按钮从上而下弹出登录界面窗口
dreamzuora的博客
12-15 2688
Insert title here $('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() }) Open modal for @mdo Open modal for @fat Open modal for @getbootstrap ...more buttons...
点击弹出窗口网页背景变暗且不可点的效果(三)：iframe实现
05-24
NULL 博文链接：https://highping.iteye.com/blog/362231
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
10-18
通过页面变暗和弹出DIV的组合使用，能够有效地引导用户的注意力并提供清晰的交互目标，从而提高用户体验。 ### 结论 通过本文的介绍，我们了解了如何使用HTML、CSS和JavaScript（jQuery）来实现一个弹窗和半透明...
jQuery实现点击弹出背景变暗遮罩效果实例代码
10-22
jQuery 实现点击弹出背景变暗遮罩效果是一种常见的网页交互设计，用于创建弹窗、提示框或选择菜单等元素时提供更好的用户体验。这个实例主要涉及了 jQuery 的事件处理、DOM 操作以及 CSS 样式设计，使得在用户点击...
JS+CSS实现Div弹出窗口同时背景变暗的方法
10-24
在网页设计中，创建弹出窗口并使背景变暗是一个常用的技术，其主要目的是为了使用户注意到弹出的内容，同时减少主页面上其他内容的干扰。本文将详细介绍如何使用JavaScript（JS）和层叠样式表（CSS）来实现一个Div弹...
纯css实现的DIV弹出窗口，周围变暗效果代码.zip
最新发布
09-26
标题中的“纯css实现的DIV弹出窗口，周围变暗效果代码”指的是使用CSS来创建一个弹出窗口（通常称为modal或dialog），并且在弹出窗口出现时，页面背景会变暗，形成一种聚焦和突出显示弹出内容的效果。这种效果在网页...
JQuery+CSS3实现封装弹出登录框效果
weixin_30539625的博客
04-29 138
上次发了一篇使用Javascript来实现弹出层的效果，这次刚好用了JQuery来实现，所以顺便记录一下： 因为这次使用了Bootstrap来做一个项目，但是由于不使用Bootstrap自带的JS插件，所以这个弹出登录框就自己实现封装来调用，做出来的效果其实和Bootstrap自带的效果差不多。OK，看一下效果图： 其实很简单，首先是html结构： <div id="mask"...
弹出式登录界面
热门推荐
拾叁
05-23 2万+
要实现这个功能的大致思路是：1.首先要在页面上设置一个登录按钮，可以是&lt;button&gt;&lt;a&gt;&lt;img&gt;都行，我们点击这个元素的时候会弹出登录框：2.其次在页面合适位置制作两个&lt;div&gt;，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"3.当用户点击登录按...
点击登陆链接在本页面弹出一个登陆窗口效果
一只小菜鸟的技术博客
09-29 1万+
效果描述：点击登陆链接在本页面弹出一个登陆窗口效果，页面变灰暗，且不关闭窗口页面无法浏览。 效果图： 1.页面代码： 登陆 登陆 用户名/Email： 密码：
php layer弹出层更改背景,点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码...
weixin_28432777的博客
03-18 241
网页特效-窗口特效-弹出窗口后网页背景变暗的效果.black_overlay{display:none;position:absolute;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:1001;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}....
点击弹出层，并且背景变暗
yushijie的专栏
07-29 768
点击弹出窗口层，并且背景变暗渐变function showDetail() {//背景  var bgObj=document.getElementById("bgDiv");  bgObj.style.width = document.bo
js制作带有遮罩弹出层实现登录小窗口
weixin_30797027的博客
09-12 310
要实现的效果如下 点击“登录”按钮后，弹出登录小窗口，并且有遮罩层（这个名词还是百度知道的，以前只知道效果，却不知道名字） 在没有点击“登录”按钮之前登录小窗口不显示，点击“登录”按钮后小窗口显示，并且遮罩层笼罩整个页面，使整个页面的其他元素暂时失去行为。 遮罩层的实现：相对于body绝对定位，宽度和高度都和body相同，并且有一定的透明度，使得下面的元素能够被看到。原先的元素的z...
div弹出层的ajax登录（Jquery版）（新）
weixin_30607659的博客
06-07 100
2011年6月22拿的毕业证，还有十几天就毕业一年了，时间过得真快，去年写了一个div弹出层的登录，这次是要写一些东西也涉及到这方面，就又写了一个，不善于言语组织，重在分享！请见谅！在此和大家一起分享一下！ 上次的地址是：div弹出层的ajax登录（Jquery版） 看见别人博客都有一个返回顶部（图片是借用梦想天空的），我也写了一下，先引用jquery（博客园中使用的话，就不需要引用...
JS+CSS实现带关闭按钮的DIV弹出窗口
11-12 1514
JS+CSS实现带关闭按钮的DIV弹出窗口 function    locking(){ document.all.ly.style.display="block"; document.all.ly.style.width=document.body.clientWidth; document.all.ly.style.height=document.body.clientHeight
vue2点击后弹出登录页面，背景变暗
05-23
然后在你的主页面中使用这两个组件来实现点击后弹出登录页面，背景变暗的效果。 下面是一个简单的示例代码： ```html <!-- App.vue --> 登录 <login v-if="showLogin" @close="showLogin = false"></login> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值