<!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. [Guide]Google Python Style Guide

    扉页 项目主页 Google Style Guide Google 开源项目风格指南 - 中文版 背景 Python 是Google主要的脚本语言.这本风格指南主要包含的是针对python的编程准则. ...

  2. 关于 base64 编码

    一.什么是Base64编码 Base64是一种用64个字符来表示任意二进制数据的方法.它是一种编码方式,而非加密方式.它通过将二进制数据转变为64个"可打印字符",完成了数据在HT ...

  3. 编写Java程序_找星座朋友应用软件

    一.About the Project 项目介绍 自古以来,人对于恒星的排列和形状很感兴趣,并很自然地把一些位置相近的星联系起来,组成星座.占星术亦称"占星学"."星占学 ...

  4. EMQX源码编译过程

    以emqx4.0.7版本为例 1.安装erlang环境 可以参考:https://www.cnblogs.com/shanfeng1000/p/11951703.html 这里需要注意一下,要按照em ...

  5. Kerberos打开debug日志

    在JVM的启动参数中加入如下配置,打开kerberos的debug开关: -Dsun.security.krb5.debug=true JVM启动后,kerberos的相关日志会打印到控制台中, 因为 ...

  6. 1.HTML基本结构、头部、注释

    基本结构 1.HTML基本结构 <html>     <head>            <meta charset="utf-8">      ...

  7. cpuinfo基本参数讲解

    1.首先我们明确几个概念  (1)物理CPU                             物理cpu数量,实际服务器中插槽上的CPU个数 实例: [root@kvm01 ~]# cat / ...

  8. spring boot + redis --- 心得

    1.前言 习惯使用springMVC 配置 redis ,现在使用spring boot ,得好好总结怎么在spring boot 配置和使用 ,区别真的挺大的. 2.环境 spring boot  ...

  9. DaemonSet：每个节点都运行一个Pod

    依旧从这里开始: kubectl explain daemonset.spec 一个基础daemonset yaml, apiVersion: apps/v1 kind: DaemonSet meta ...

  10. 【Azure 应用服务】Azure Mobile App (NodeJS) 的服务端部署在App Service for Windows中出现404 Not Found -- The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

    问题描述 使用NodeJS的后端应用,开发一个Mobile App的服务端,手机端通过REST API来访问获取后端数据.在本地编译好后,通过npm start启动项目,访问效果如下: 但是,当把项目 ...