<!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. NeRF: Representing Scenes as Neural Radiance Fields for View Synthesis

    目录 概 主要内容 positional encoding 额外的细节 代码 Mildenhall B., Srinivasan P. P., Tancik M., Barron J. T., Ram ...

  2. Challenging Common Assumptions in the Unsupervised Learning of Disentangled Representations

    目录 概 主要内容 Locatello F., Bauer S., Lucic M., R"{a}tsch G., Gelly S. Sch"{o}lkopf and Bachem ...

  3. windows环境下elasticsearch安装教程(超详细)

    一.安装jdk ElasticSearch是基于lucence开发的,也就是运行需要java jdk支持.所以要先安装JAVA环境. 由于ElasticSearch 5.x 往后依赖于JDK 1.8的 ...

  4. Debug解决问题方法论

    发现问题怎么办,如何处理, 所谓的Debug的一般流程是什么, 下面是我对此的一些思考总结, 后面还会继续完善补充. 1.处理思路总纲 发现问题 查看日志 没有日志,去找日志 找不到日志,继续找,有些 ...

  5. JZOJ5409. Fantasy && Luogu2048 [NOI2010]超级钢琴

    题目大意 给出一个序列和\(L, R\), 求前k大长度在\([L,R]\)之间的连续子序列的和的和. 解题思路 朴素的想法是对于一个左端点\(p\), 它的右区间取值范围是一个连续的区间即\([p+ ...

  6. Python原生数据结构增强模块collections

    collections简介 python提供了4种基本的数据结构:list.tuple.dict.set.基本数据结构完全可以hold住所有的场景,但是在处理数据结构复杂的场景时,这4种数据结构有时会 ...

  7. JDK线程池异常处理方式

    1. 抛出异常 execute() java.util.concurrent.ThreadPoolExecutor#runWorker 中抛出,抛出之后经过以下两个步骤: catch块捕获,捕获之后再 ...

  8. python 使用demical模块四舍五入

    前言: 断言部分需要用到四舍五入,首先使用的是python自带的round(),做四舍五入进位处理,但使用过程中,发现round似乎是当保留小数位的最后一位是偶数,和保留小数位后一位为5时,就不进位. ...

  9. Typescript Record的用法

    Record<Keys,Type> 构造一个对象类型,其属性key是Keys,属性value是Tpye.被用于映射一个类型的属性到另一个类型 interface CatInfo { age ...

  10. java 线程 总结

    1.前言 (1)线程的上一级是进程,进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的. (2)线程与进程相似,但线程是一个比进程更小的执行单位,也被称为轻量级进程.一个进程在其执行 ...