要实现的效果如下

点击“登录”按钮后，弹出登录小窗口，并且有遮罩层（这个名词还是百度知道的，以前只知道效果，却不知道名字）

在没有点击“登录”按钮之前登录小窗口不显示，点击“登录”按钮后小窗口显示，并且遮罩层笼罩整个页面，使整个页面的其他元素暂时失去行为。

遮罩层的实现：相对于body绝对定位，宽度和高度都和body相同，并且有一定的透明度，使得下面的元素能够被看到。原先的元素的z-index为0，遮罩层的z-index在弹出登录小窗口和原先元素的之间。

说的不是很清楚，还是看代码吧！

<!DOCTYPE html>

<html>

<head>

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

显示如下：

关于拖动小窗口的步骤：

鼠标在小窗口上按下 --> 拖动 --> 小窗口移动 --> 鼠标弹起 --> 小窗口停止移动

这分别代表几个事件！

鼠标按下事件 onmouserdown

鼠标移动事件 onmousemove

鼠标弹起事件 onmouseup

document.onmousemove 事件表示 在文档中鼠标移动就会触发此事件。

看moveLogin函数的逻辑：

首先moveLogin函数被绑定在 id为firstLine元素 的onmousedown 事件上，就是当鼠标在firstLine元素上按下的时候，执行moveLogin函数；

然后moveLogin函数先声明了moveable=true，表示可以拖动元素了，接着把document.onmousemove事件绑定函数了，即从此之后只要移动鼠标就是触发此事件，执行函数内容，该函数先判断moveable是否为true即是否可以拖动，是则拖动，否则什么也不做；

最后moveLogin函数在document.onmouserup 事件函数中将moveable改为false，表示拖动结束。要想再次拖动必须先触发firstLine元素 的onmousedow 事件定义moveable=true

js制作带有遮罩弹出层实现登录小窗口的更多相关文章

  1. Js实例——模态框弹出层

    1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...

  2. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

  3. 火狐浏览器高度&制作简单万年历&弹出层

    浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...

  4. Web前端设计模式--制作漂亮的弹出层

    设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问 ...

  5. Layui关闭弹出层并刷新父窗口

    先确保已经引入layui和jquery 再确保初始化layer弹出层 <script> layui.use(['form', 'layer'], function() { var form ...

  6. 原生Js弹窗插件|web弹出层组件|对话框

    wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...

  7. jQuery制作信息提示弹出层插件【推荐】

    给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.​1. [代码][JavaScript]代码 <script type="text/javascript& ...

  8. js,ajax,layer笔记(弹出层,在弹出一个弹框)

    整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...

  9. html 通用 遮罩弹出层 弹出后 支持跳转页面

    //showMessage 提示的内容默认为空必填 buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认 url:跳转链接 传入"& ...

随机推荐

  1. 调整Excel的打印线

  2. ML 02、监督学习

    机器学习算法原理.实现与实践——监督学习 机器学习包括监督学习.非监督学习.半监督学习及强化学习,这里先讨论监督学习. 监督学习的任务是学习一个模型,使模型能够对任意给定的输入,对其相应的输出做出一个 ...

  3. POJ 2482 Stars in Your Window 线段树扫描线

    Stars in Your Window   Description Fleeting time does not blur my memory of you. Can it really be 4 ...

  4. 调整linux的时钟

    想把linux时钟调整的正常了. 网上找了找资料,找到了同步办法: http://blog.51yip.com/server/1474.html 即使用: sudo yum install ntp s ...

  5. 水题 HDOJ 4716 A Computer Graphics Problem

    题目传送门 /* 水题:看见x是十的倍数就简单了 */ #include <cstdio> #include <iostream> #include <algorithm ...

  6. Android基础环境搭建

      1.安装JDK 从官网下载JDK安装, http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151 ...

  7. POJ3252 Round Numbers（不重复全排列）

    题目问区间有多少个数字的二进制0的个数大于等于1的个数. 用数学方法求出0到n区间的合法个数,然后用类似数位DP的统计思想. 我大概是这么求的,确定前缀的0和1,然后后面就是若干个0和若干个1的不重复 ...

  8. BZOJ3838 : [Pa2013]Raper

    将选取的$A$看成左括号,$B$看成右括号,那么答案是一个合法的括号序列. 那么只要重复取出$k$对价值最小的左右括号,保证每时每刻都是一个合法的括号序列即可. 将$($看成$1$,$)$看成$-1$ ...

  9. BZOJ4134 : ljw和lzr的hack比赛

    设$f[x]$为$x$子树里的子游戏的sg值,$h[x]$为$x$所有儿子节点$f[x]$的异或和,则: $f[x]=mex(y到x路径上所有点的h的异或和\ xor\ y到x路径上所有点的f的异或和 ...

  10. 【wikioi】1033 蚯蚓的游戏问题（费用流）

    http://wikioi.com/problem/1033/ 这题也是很水的费用流啊,同之前那题一样,拆点然后建边,容量为1,费用为点权.然后建个源连第一行每个点,容量为1,费用为0,然后最后一行每 ...