<!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. Windows10 修改键位映射

    https://blog.csdn.net/lhdalhd1996/article/details/90741092 1.为什么要修改键位我的笔记本键盘上下键是这样的: 很想捶死产品经理,你是从来不用 ...

  2. js字符串常用函数

    字符截取函数 1. array.slice(start, end) 第一个参数代表开始位置,第二个参数代表结束位置的下一个位置 start:规定从何处开始选取. 如果是负数,那么它规定从数组尾部开始算 ...

  3. 【React自制全家桶】八、React动画以及react-transition-group动画库的使用

    React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...

  4. shell做成csv文件

    echo a,b,c,d >aa.csv 其实就是用逗号做分隔符

  5. java源码-CountDownLatch源码分析

    这次分析CountDownLatch,相信大部分人都用过把! CountDownLatch内部还是Sync对象,还是基础AQS(可见其重要性),首先看一下CountDownLatch初始化,Count ...

  6. python基础知识(保留字和标识符、变量、常量、基本数据类型)

    保留字 保留字是python语言中已经被赋予特定意义的一些单词,开发程序时,不可以作为变量.函数.类.模块和其他对象的名称来使用例如:import 关键字输入后会变色 通过代码进行查看 import ...

  7. 【MM系列】SAP技巧之更改布局

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP技巧之更改布局   前言部分 ...

  8. meta viewport移动端自适应

    参考链接:https://www.jianshu.com/p/561357d7cd7b

  9. kibana 查询例子

    1.数字比较和布尔查询 account_number:< AND balance:>

  10. win10任务切换变卡

    问题:更新之前没有任何问题,用alt+tab是秒切,更新后切换任务后会黑屏一两秒然后才转到切换页面 解决方法:关闭服务“system interface foundation service”