<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js制作带有遮罩弹出层实现登录小窗口</title>
    <link type="text/css" rel="stylesheet" href="./css/reset.css" />
    <script>
        window.onload = function(){
            document.getElementById("btn_showlogin").onclick = shogMinLogin;
            document.getElementById("close_minilogin").onclick = closeLogin;
            document.getElementById("firstLine").onmousedown = moveLogin;
            /* 显示登录窗口 */
            function shogMinLogin(){
                var mini_login = document.getElementsByClassName("mini_login")[0];
                var cover = document.getElementsByClassName("cover")[0];
                mini_login.style.display = "block";
                cover.style.display = "block";

                mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
                mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
            }

            /* 关闭登录窗口 */
            function closeLogin(){
                var mini_login = document.getElementsByClassName("mini_login")[0];
                var cover = document.getElementsByClassName("cover")[0];
                mini_login.style.display = "none";
                cover.style.display = "none";
            }

            /* 移动登录窗口 */
            function moveLogin(event){
                var moveable = true;

                //获取事件源
                event = event ? event : window.event;
                var clientX = event.clientX;
                var clientY = event.clientY;

                var mini_login = document.getElementById("mini_login");
                console.log(mini_login);
                var top = parseInt(mini_login.style.top);
                var left = parseInt(mini_login.style.left);//鼠标拖动
                document.onmousemove = function(event){
                    if(moveable){
                        event = event ? event : window.event;
                        var y = top + event.clientY - clientY;
                        var x = left + event.clientX - clientX;
                        if(x>0 && y>0){
                            mini_login.style.top = y + "px";
                            mini_login.style.left = x + "px";
                        }
                    }
                }
                //鼠标弹起
                document.onmouseup = function(){
                    moveable = false;
                }
            }
        };
    </script>

    <style>
        /* 弹出 样式 */
        .mini_login{
            display:none;
            position:absolute;
            z-index:2;
            background:white;
        }
        .mini_login .item{
            width:320px;
            margin:0 auto;
            height:48px;
            line-height:48px;
            padding:0 20px;
        }
        /* 登录窗第一行*/
        .mini_login .firstLine{
            color:#666;
            background:#f7f7f7;
            font-size:18px;
            font-weight:bold;
            cursor:move;
        }
        .mini_login .item .login_close{
            display:inline-block;
            float:right;
            cursor:pointer;
        }

        .mini_login .item label{
            font-size:14px;
            margin-right:15px;
        }
        .mini_login .item input{
            display:inline-block;
            height:60%;
            width:70%;
        }
        /* 登录按钮 */
        .mini_login .item a.btn_login{
            display:block;
            margin:10px 10% 0;
            height:30px;
            line-height:30px;
            width:80%;
            background:#4490F7;
            color:white;
            font-size:16px;
            font-weight:bold;
            text-align:center;
        }
        /* 遮罩层样式 */
        .cover{
            display:none;
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            background-color:#000;
            opacity:0.3;
        }
    </style>
</head>
<body>

<!-- 主体 -->
<div class="main">
    <a href="javascript:void(0)" class="btn_login" id="btn_showlogin">登录框</a>
</div>

<!-- 弹出登录小窗口 -->
<div class="mini_login" id="mini_login">
    <!-- 表单 -->
    <form action="" method="post">
        <div class="item firstLine" id="firstLine">
            <span class="login_title">我要登录</span>
            <span class="login_close" id="close_minilogin">X</span>
        </div>
        <div class="item">
            <label>用户</label>
            <input type="text" name="uname" />
        </div>
        <div class="item">
            <label>密码</label>
            <input type="password" name="upwd" />
        </div>
        <div class="item">
            <a href="javascript:void(0)" class="btn_login" onclick="">登录</a>
        </div>
    </form>
</div>
<!-- 遮罩层 -->
<div class="cover"></div>

</body>
</html>

js带有遮罩的弹窗的更多相关文章

  1. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  2. div 遮罩层 弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. JS框架_(Vue.js)带有星期日期的数字时钟

    百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...

  5. JS编写简单的弹窗插件(含有demo和源码)

    最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...

  6. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

  7. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  8. js 实现遮罩某一部分

    借用一下喜马拉雅的效果图,比较一下下面的遮罩层的高度:       我们可以看到它的遮罩层一直都是只遮住的下面.开始想着怎么用CSS实现,几经测试也没弄出来,如果正在看这篇文章的你,知道如何用CSS达 ...

  9. js实现页面局部弹窗打印

    原文出自:http://www.haorooms.com/post/css3media 在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印.网上看了一下,大体上有2中实现方法,一种是用cs ...

随机推荐

  1. js解析后台传过来的json

    java ,action public void print(String rs){ PrintWriter out; try { HttpServletResponse response = Ser ...

  2. Block代码块中使用局部变量注意点

    第一次写代码遇到报这个错,实在是想不通为什么,按常理应该是不会有问题,报错的呀??纠结了一会之后只好仔细查看报错原因咯,原来是: 当我们在block代码块中使用局部变量时,就会很容易出现如图的错误. ...

  3. 内网gitlab访问外网

     外网要访问内网,内网出口必须有公网ip,且外网访问内部网络可以用花生壳,可以用主机端口映射  写ansible调api,打通内网到阿里云的master节点   如何将公司内网与云服务器内网打通 参照 ...

  4. 【D3D12学习手记】4.3.8 Create the Depth/Stencil Buffer and View

    我们现在需要创建深度/模板缓冲区. 如§4.1.5所述,深度缓冲区只是一个2D纹理,用于存储最近的可见对象的深度信息(如果使用模板(stencil),则也会存储模板信息). 纹理是一种GPU资源,因此 ...

  5. caoz的梦呓：信息安全常识科普

    猫宁!!! 参考链接:https://mp.weixin.qq.com/s/cl4TfOodBGSjUuEU8e0rGA 对方公众号:caoz的梦呓 前天在新加坡IC咖啡做了一场关于信息安全的常识普及 ...

  6. Spring体系

    1.Spring简介 Spring是一个轻量级Java开发框架,最早有Rod Johnson创建,目的是为了解决企业级应用开发的业务逻辑层和其他各层的耦合问题.它是一个分层的JavaSE/JavaEE ...

  7. java 数组学习

    遍历数组 --- for和foreach int[][] A = {{2,4},{3,5}}; int i = 0; for (int[] is : A) { i++; int j = 0; for ...

  8. （转）Jquery+Ajax实现Select动态定数据

    解决思路: 在数据库中建立类型字典式表.将下拉框需要添加的项,在数据库表里中文.英文名称对应起来. 下拉框动态绑定数据库表中需要字段. <div id="bgDiv" sty ...

  9. Laravel NPM包的使用

    示例:安装sweetalert插件 1.yarn add sweetalert 2.resources/js/bootstrap.js中引入: require('sweetalert'); $(doc ...

  10. HDU 1231 最大连续子序列 （动态规划）

    最大连续子序列 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...