js实现点击弹窗弹出登录框

2024-10-24 09:10:32

本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码，供大家参考，具体内容如下

1 图片预览

2 index.html代码

<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js点击弹窗弹出登录框代码</title>
 </head>
 <body>
  <style>
   *{
    margin:0;
    padding:0;
   }
         button, input{
    outline:none;
   }
   button, .login{
    width:120px;
    height:42px;
    background:#f40;
    color:#fff;
    border:none;
    border-radius:6px;
    display: block;
    margin:20px auto;
    cursor: pointer;
   }
   .popOutBg{
    width:100%;
    height:100%;
    position: fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,.6);
    display: none;
   }
   .popOut{
    position:fixed;
    width:600px;
    height:300px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-300px;
    background:#fff;
    border-radius:8px;
    overflow: hidden;
    display: none;
   }
   .popOut > span{
    position: absolute;
    right:10px;
    top:0;
    height:42px;
    line-height:42px;
    color:#000;
    font-size:30px;
    cursor: pointer;
   }
   .popOut table{
    display: block;
    margin:42px auto 0;
    width:520px;
   }
   .popOut caption{
    width:520px;
    text-align: center;
    color:#f40;
    font-size:18px;
    line-height:42px;
   }
   .popOut table tr td{
    color:#666;
    padding:6px;
    font-size:14px;
   }
   .popOut table tr td:first-child{
    text-align: right;
   }
   .inp{
    width:280px;
    height:30px;
    line-height:30px;
    border:1px solid #999;
    padding:5px 10px;
    color:#000;
    font-size:14px;
    border-radius:6px;
   }
   .inp:focus{
    border-color:#f40;
   }
   @keyframes ani{
    from{
     transform:translateX(-100%) rotate(-60deg) scale(.5);
    }
    50%{
     transform:translateX(0) rotate(0) scale(1);
    }
    90%{
     transform:translateX(20px) rotate(0) scale(.8);
    }
    to{
     transform:translateX(0) rotate(0) scale(1);
    }
   }
   .ani{ animation:ani .5s ease-in-out;}
  </style>
  <button type="button">登录</button>
  <div class="popOutBg"></div>
  <div class="popOut">
   <span title="关闭"> x </span>
   <table>
    <caption>欢迎登录本网站</caption>
    <tr>
     <td width="120">用户名：</td>
     <td><input type="text" class="inp" placeholder="请输入用户名" /></td>
    </tr>
    <tr>
     <td>密码：</td>
     <td><input type="password" class="inp" placeholder="请输入密码" /></td>
    </tr>
    <tr>
     <td colspan="2"><input type="button" class="login" value="登录" /></td>
    </tr>
   </table>
  </div>
  <script type="text/javascript">
   function $(param) {
    if (arguments[1] == true) {
     return document.querySelectorAll(param);
    } else {
     return document.querySelector(param);
    }
   }
   function ani() {
    $(".popOut").className = "popOut ani";
   }
   $("button").onclick = function() {
    $(".popOut").style.display = "block";
    ani();
    $(".popOutBg").style.display = "block";
   };
   $(".popOut > span").onclick = function() {
    $(".popOut").style.display = "none";
    $(".popOutBg").style.display = "none";
   };
   $(".popOutBg").onclick = function() {
    $(".popOut").style.display = "none";
    $(".popOutBg").style.display = "none";
   };
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现百度登录框鼠标拖拽效果

以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
JS实现下拉菜单列表与登录注册弹窗效果

下拉菜单列表 <style> *{ margin: 0px; padding: 0px; } .menu{ width: 1100px; height: 30px; background-image: url(img/魅力罗兰Music炫图18.jpg); margin-left: 200px; margin-top: 50px; } .btn{ width: 183.3px; height: 30px; float: left; text-align: center; line-height
原生js实现可拖动的登录框效果

实现原理 1.onmousemove事件触发时不断更新鼠标的pageXY改变位置, 登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离 2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离,再设置true允许拖拽 3.onmouseup 鼠标弹起设置false停止拖拽 4.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示代码中有详细的注释完整代码 <!DOCTYPE html PUBL
js实现当复选框选择匿名登录时隐藏登录框效果

本文实例讲述了js实现当复选框选择匿名登录时隐藏登录框效果.分享给大家供大家参考.具体如下: 本技巧是比较常见的,有些网站可以登录发帖或匿名发帖,当勾选复选框选择匿名发帖时,登录框自动隐藏了,是不是更人性化了?这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <title>当复
js实现登录框鼠标拖拽效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i
js实现点击弹窗弹出登录框

本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码,供大家参考,具体内容如下 1 图片预览 2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

本文实例讲述了CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法.分享给大家供大家参考.具体分析如下: 这里用CSS+JS实现点击文字后动画展开一个DIV层菜单,到期会自动关闭,是CSS结合JS实现的效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
JS实现关闭当前页而不弹出提示框的方法

本文实例讲述了JS实现关闭当前页而不弹出提示框的方法.分享给大家供大家参考,具体如下: 关闭当前页面,并且打开新页面(不提示) function closeWinAndOpen(url) { var sWinName = "LR"+parseInt(Math.random() * 100000000);//利用随机数处理WinName window.open(url,sWinName, 'toolbar=no,location=no,directories=no,status=yes,
点击按钮弹出模态框的一系列操作代码实例

实现功能提交按钮功能: 点击提交按钮的时候都会弹出模态框,但是有不同的状态: 审核状态未通过:弹出未通过理由的input输入框,模态框中除了取消和确定按钮,新增确定并保存医院的按钮审核状态已通过:如果新增医院的经纬度没有填写,会提示填写经纬度,填写之后点击提交按钮,模态框中显示确定和取消按钮审核状态待审核:模态框中显示确定和取消按钮添加医院的html代码: <div class="form-group"> <label class="control-
js实现点击按钮弹出上传文件的窗口

1.详细描述在页面上设置一个"选择文件"按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function F_Open_dialog() {
纯js实现仿QQ邮箱弹出确认框

代码非常简单,这里就不多废话了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE>QQ邮箱的弹出层</TITLE> <meta http-equiv="Co
javascript 仿开心网好友印象功能(点击文字弹出印象框)

仿开心网好友印象功能 .box{ width:500px; padding:10px; height:auto; overflow:hidden; text-align:center} .box span{ line-height:30px; height:30px;white-space:nowrap; display:inline-block; cursor:pointer} .box a,.box a:hover{ padding:10px;color:#fff; line-height:
JSP实现弹出登陆框以及阴影效果

本文实例为大家分享了JSP实现弹出登陆框以及阴影效果的具体代码,供大家参考,具体内容如下先说下思想JSP弹出登陆框的思想,我们在JSP中新建一个div层,然后Display设置成none,这样打开后是不可见的,然后我们通过一个点击事件,比如当我们点击登陆按钮时,就给它注册一个点击事件,使得div层变得可见,这样就实现了弹出效果. 代码如下: CSS样式: <style> .win { POSITION:absolute; left:55%; top:60%; width:400px; hei
css和js实现弹出登录居中界面完整代码

我实现的这个和许多网站上的登录弹出窗口差不多,大家举一反三,先看我写完后的结果. 点击创建相册后会在这个屏幕的中间显示创建相册的表单,整个背景颜色变暗,点击右上角的X会关闭这个表单. html代码创建按钮 <li id="create"><a href="#form" rel="external nofollow" ><span>创建相册</span></a></li>
JS点击图片弹出文件选择框并覆盖原图功能的实现代码

简单说下原理,把显示的图片的<img>标签和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

js实现点击弹窗弹出登录框

1 图片预览

2 index.html代码

相关推荐

随机推荐