<!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. CONTRASTIVE REPRESENTATION DISTILLATION

    目录 概 主要内容 超参数的选择 代码 Tian Y., Krishnan D., Isola P. CONTRASTIVE REPRESENTATION DISTILLATION. arXiv pr ...

  2. 后缀树的建立-Ukkonen算法

    参考: Ukkonen算法讲解 Ukkonen算法动画 Ukkonen算法,以字符串abcabxabcd为例,先介绍一下运算过程,最后讨论一些我自己的理解. 需要维护以下三个变量: 当前扫描位置# 三 ...

  3. electron使用动态配置文件及持久化存储

    1.如何在打包之后,把动态配置文件比如[config.json]放在根目录,不被打包到asar文件中 //解决思路,electron可以拷贝静态资源,比如你把config.json放在项目的根目录下, ...

  4. Java程序设计基础笔记 • 【目录】

    持续更新中- 我的大学笔记>>> 章节 内容 实践练习 Java程序设计基础作业目录(作业笔记) 第1章 Java程序设计基础笔记 • [第1章 初识Java] 第2章 Java程序 ...

  5. Python_jsonPath模块的使用

    jsonpath简介 如果有一个多层嵌套的复杂字典,想要根据key批量提取value,还是比较繁琐的.jsonPath模块就能解决这个痛点,接下来我们来学习一下jsonpath模块. 因为jsonpa ...

  6. Python 安装第三方模块时 报Retrying(Retry(total=4, connect=None, read=None, redirect=None, status=None))...[WinError 10061]由于目标计算机积极拒绝，无法连接 错误

    今日在安装ddt模块时(Windows系统),cmd报了一个以前从未见过的错误,如下图所示: 经百度,知是镜像源的问题,将安装命令改成如下命令: pip install ddt -i https:// ...

  7. Linux系统使用SSH登录之前如何显示横幅消息

    OpenSSH有一个名为Banner的内置选项.在允许身份验证之前,将指定文件的内容发送给远程用户.如果Banner选项设置为none,那么在ssh登录时就不会显示任何Banner消息.默认情况下,不 ...

  8. 日志通过脚本导入到HDFS当中

    可以关注公众号:分享电脑学习回复"百度云盘" 可以免费获取所有学习文档的代码(不定期更新) 利用shell脚本定时备份日志数据到HDFS上(适合日志数据比较少的时候) 时间命令 d ...

  9. win10中查看开关机时间及查看admin的RID的方法

    原文链接: https://www.toutiao.com/i6772133439593251339/ 打开系统的注册表 键盘输入win+r组合键出现运行窗口命令 输入regedit 按回车键,进入注 ...

  10. actf2020upload

    actf2020upload .php后缀过滤 1.上传文件,要求后缀为.png/.gif/.jpg 2.抓包,后缀改成.phtml后放行,上传成功,访问地址,根目录下找到flag