<!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. SuperPixel

    目录 SLIC Superpixel algorithm 距离函数的选择 代码 Gonzalez R. C. and Woods R. E. Digital Image Processing (For ...

  2. Jmeter环境变量配置你不得不知道的事情

    在安装Jmeter的过程中大家肯定需要配置环境,但是为什么要配置JDK的环境变量呢?大家有没有好奇过,有没有仔细去像一下呢,其实在安装Jmeter前,大家应该都知道Jmeter是我们JAVA开发的,J ...

  3. 【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)

    问题描述 总所周知,Azure App Service服务会默认提供一个 ***.chinacloudsites.cn为后缀的域名,但是该域名由上海蓝云网络科技有限公司备案,仅用于向其客户提供 Azu ...

  4. Java初学者作业——编写Java程序，实现用户登录验证。

    返回本章节 返回作业目录 需求说明: 编写Java程序,实现用户登录验证. 若用户名与密码输入正确,则提示"登录成功,欢迎回来!",若用户名与密码不匹配,则提示"用户名和 ...

  5. Nginx_配置文件nginx.conf配置详解

    user nginx nginx ; # Nginx用户及组:用户 组.window下不指定 worker_processes 8; # 工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍于CP ...

  6. koa路由接口

    const router = require('koa-router')() //返回一个页面 router.get('/', async (ctx, next) => { global.con ...

  7. 帮你克服web字体选择焦虑症

    1.背景 前端时间产品经理问我,移动端web默认字体有哪些,哪些字体不侵权?我当时感觉这方面的知识很匮乏,只能回答出微软雅黑和苹方简体,平常写代码时,没怎么留意过font-family设置的字体属性, ...

  8. elasticsearch之集成中文分词器

    IK是基于字典的一款轻量级的中文分词工具包,可以通过elasticsearch的插件机制集成: 一.集成步骤 1.在elasticsearch的安装目录下的plugin下新建ik目录: 2.在gith ...

  9. Java加减乘除计算器实现

    加减乘除计算机的实现 public static void main(String[] args) { while(true) { System.out.println("依次输入要计算的2 ...

  10. 使用idea时jsp中使用out.print();时报错的解决办法

    在用Maven创建web项目时 在jsp页面中out.print();老是报错 这边print显示红色出错因为这边使用的是JSP的API并不是Servlet的,但是可以运行,所以我们只要导包就完事其实 ...