<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .login-header {

            width: 100%;

            text-align: center;

            height: 30px;

            font-size: 24px;

            line-height: 30px;

        }

        ul, li, ol, dl, dt, dd, div, p, span, h1, h2, h3, h4, h5, h6, a {

            padding: 0px;

            margin: 0px;

        }

        .login {

            width: 512px;

            height: 280px;

            position: absolute;

            border: #ebebeb solid 1px;

            left: 50%;

            right: 50%;

            background: #ffffff;

            box-shadow: 0px 0px 20px #ddd;

            z-index: 9999;

            margin-left: -256px;

            margin-top: 140px;

            display: none;

        }

        .login-title {

            width: 100%;

            margin: 10px 0px 0px 0px;

            text-align: center;

            line-height: 40px;

            height: 40px;

            font-size: 18px;

            position: relative;

            cursor: move;

            -moz-user-select:none;/*火狐*/

            -webkit-user-select:none;/*webkit浏览器*/

            -ms-user-select:none;/*IE10*/

            -khtml-user-select:none;/*早期浏览器*/

            user-select:none;

        }

        .login-input-content {

            margin-top: 20px;

        }

        .login-button {

            width: 50%;

            margin: 30px auto 0px auto;

            line-height: 40px;

            font-size: 14px;

            border: #ebebeb 1px solid;

            text-align: center;

        }

        .login-bg {

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0px;

            left: 0px;

            background: #000000;

            filter: alpha(opacity=30);

            -moz-opacity: 0.3;

            -khtml-opacity: 0.3;

            opacity: 0.3;

            display: none;

        }

        a {

            text-decoration: none;

            color: #000000;

        }

        .login-button a {

            display: block;

        }

        .login-input input.list-input {

            float: left;

            line-height: 35px;

            height: 35px;

            width: 350px;

            border: #ebebeb 1px solid;

            text-indent: 5px;

        }

        .login-input {

            overflow: hidden;

            margin: 0px 0px 20px 0px;

        }

        .login-input label {

            float: left;

            width: 90px;

            padding-right: 10px;

            text-align: right;

            line-height: 35px;

            height: 35px;

            font-size: 14px;

        }

        .login-title span {

            position: absolute;

            font-size: 12px;

            right: -20px;

            top: -30px;

            background: #ffffff;

            border: #ebebeb solid 1px;

            width: 40px;

            height: 40px;

            border-radius: 20px;

        }

    </style>

</head>

<body>

<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>

<div id="login" class="login" >

    <div id="title" class="login-title">登录会员

        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>

    </div>

    <div class="login-input-content">

        <div class="login-input">

            <label>用户名：</label>

            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">

        </div>

        <div class="login-input">

            <label>登录密码：</label>

            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">

        </div>

    </div>

    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>

</div>

<!-- 遮盖层 -->

<div id="bg" class="login-bg" ></div>

<script>

  // 显示登录框和遮盖层

  var login = document.getElementById('login');

  var bg = document.getElementById('bg');

  //1 点击按钮，弹出登录框和遮盖层

  var link = document.getElementById('link');

  link.onclick = function () {

    login.style.display = 'block';

    bg.style.display = 'block';

    return false;

  }

  // 2 点击关闭按钮，隐藏 登录框和遮盖层

  var closeBtn = document.getElementById('closeBtn');

  closeBtn.onclick = function () {

    // 隐藏 登录框和遮盖层

    login.style.display = 'none';

    bg.style.display = 'none';

  }

  // 3 拖拽

  var title = document.getElementById('title');

  title.onmousedown = function (e) {

    // 鼠标按下，求鼠标在盒子中的位置

    var x = e.pageX - login.offsetLeft;

    var y = e.pageY - login.offsetTop;

    document.onmousemove = function (e) {

      // 鼠标移动的时候， 盒子的坐标

      var loginX = e.pageX - x;

      var loginY = e.pageY - y;

      login.style.left = loginX + 256 + 'px';

      login.style.top = loginY - 140 + 'px';

    }

  }

  document.onmouseup = function () {

    // 移除鼠标移动的事件

    document.onmousemove = null;

  }

</script>

</body>

</html>

bom案例2-弹出层的更多相关文章

  1. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  2. Lyaer 单弹出层获取数据

    案例完整代码如下 var cls = layer.open({                title: "请选择被换班人",                type: 2,   ...

  3. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

  4. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  6. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  7. zepto弹出层组件

    html: <!DOCTYPE html> <html> <meta charset="utf-8"> <title></ti ...

  8. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  9. Fancybox丰富的弹出层效果

    Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facybox弹出层效果,相比facybox,fancybox显得功能更为齐全,它除了可以加载DIV,图片 ...

  10. zDiaLog弹出层

    zDiaLog弹出层  立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...

随机推荐

  1. C++异常处理（try catch throw）完全攻略

    程序运行时常会碰到一些异常情况,例如: 做除法的时候除数为 0: 用户输入年龄时输入了一个负数: 用 new 运算符动态分配空间时,空间不够导致无法分配: 访问数组元素时,下标越界:打开文件读取时,文 ...

  2. Java初学者作业——编写Java程序， 实现根据用户购买商品总金额， 计算实际支付的金额及所获得的购物券金额。

    返回本章节 返回作业目录 需求说明: 编写Java程序, 实现根据用户购买商品总金额, 计算实际支付的金额及所获得的购物券金额. 购买总金额达到或超过 1000元,按 8折优惠,送 200元的购物券: ...

  3. Redis_设置密码

    一.临时设置密码 # 获取密码 config get requirepass # 设置密码为123456 config set requirepass 123456 # 验证密码.当设置密码后,进入r ...

  4. Thrift框架-具体使用

    1.前言 使用thrift心得: (1)thrift是一个RPC的框架  ,RPC是远程过程调用协议:用于进行可扩展且跨语言的服务的开发,以构建在C++.Java.Python.PHP.Ruby.Er ...

  5. centos 内存使用情况+负载使用情况

    内存使用情况,查看内存 free -h #查看内存 available:  可用内存 buff/cache:   缓存内存 free:   空闲内存 used: 已使用内存 负载使用情况 cat /p ...

  6. Echart可视化学习（七）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 官网找到类似实例, 适当分 ...

  7. 小程序canvas绘制纯色圆角区域 setdata数组某一项

    小程序canvas绘制纯色圆角区域: //方法: roundRectPath:function(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x ...

  8. 力扣 - 剑指 Offer 49. 丑数

    题目 剑指 Offer 49. 丑数 思路1 丑数是只包含 2.3.5 这三个质因子的数字,同时 1 也是丑数.要计算出 n 之前全部的丑数,就必须将 n 之前的每个丑数都乘以 2.3.5,选取出最小 ...

  9. 【Java】重载与重写

    重载与重写 一.重载 定义 在同一个类中,允许存在一个以上的同名方法,只要它们的参数个数或者参数类型不同即可.同一个类.相同方法名,参数列表不同:参数个数不同,参数类型不同. Java的重载是可以包括 ...

  10. CTF-sql-group by报错注入

    本文章主要涉及group by报错注入的原理讲解,如有错误,望指出.(附有目录,如需查看请点右下角) 一.下图为本次文章所使用到 user表,该表所在的数据库为 test 二.首先介绍一下本文章所使用 ...