要实现的效果如下

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

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

遮罩层的实现：相对于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. ARP侦查工具Netdiscover

    ARP侦查工具Netdiscover Netdiscover是一个主动/被动的ARP侦查工具.该工具在不使用DHCP的无线网络上非常有用.使用Netdiscover工具可以在网络上扫描IP地址,ARP ...

  2. C++ windows遍历目录

    bool Search(TCHAR *Path,TCHAR *File) { HANDLE hFind; WIN32_FIND_DATA wfd; ZeroMemory(&wfd,sizeof ...

  3. Python核心模块——urllib模块

    现在Python基本入门了,现在开始要进军如何写爬虫了! 先把最基本的urllib模块弄懂吧. urllib模块中的方法 1.urllib.urlopen(url[,data[,proxies]]) ...

  4. POJ2686 Traveling by Stagecoach（状压DP+SPFA）

    题目大概是给一张有向图,有n张票,每张票只能使用一次,使用一张票就能用pi匹马拉着走过图上的一条边,走过去花的时间是边权/pi,问从a点走到b点的最少时间是多少. 用dp[u][S]表示当前在u点且用 ...

  5. POJ1797 Heavy Transportation（SPFA）

    题目要求1到n点的最大容量的增广路. 听说是最短路求的,然后乱搞就A了.. 大概能从Bellman-Ford的思想,dk[u]表示从源点出发经过最多k条边到达u点的最短路,上理解正确性. #inclu ...

  6. Piggy-Bank[HDU1114]

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  7. c/c++ 关于swap的不同写法

    利用模板 template<typename T>inline void swap(T& a, T& b){ T tmp = a; a = b; b = tmp; } 利用 ...

  8. 【BZOJ】1821: [JSOI2010]Group 部落划分 Group（最小生成树+贪心）

    http://www.lydsy.com:808/JudgeOnline/problem.php?id=1821 这题裸题. 本题要求最短距离最长,很明显,我们排序. 这里存在贪心,即我们把边权最小的 ...

  9. Chromium的UI绘制初探

    转载请注明出处:http://www.cnblogs.com/fangkm/p/3943896.html 常见的UI库的绘制逻辑 任何一个成熟的界面框架都有一个相当复杂的结构,消息循环的处理.控件的布 ...

  10. SSh结合Easyui实现Datagrid的分页显示

    近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...