<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

body{

    margin:0px;

    }

#wrap{

    background:black;

    opacity:0.3;

    filter:alpha(apacity=30);

    position:absolute;

    left:0px;

    top:0px;

    display:none;

    }

#box{

    width:300px;

    height:200px;

    padding:10px;

    background:white;

    border:5px solid #333;

    position:absolute;

    display:none;

    }

#close{

    position:absolute;

    right: 5px;

    top: 5px;

    text-decoration: none;

    color: black;

    }

#close:hover {

    background: #333;

    color: white;

    }

</style>

<script type="text/javascript">

window.onload = function ()

{

    var obtn = document.getElementsByTagName('input')[0];

    var owrap = document.getElementById('wrap');

    var obox = document.getElementById('box');

    var oa = document.getElementById('close');

    oa.onclick = function ()

    {

        owrap.style.display = 'none';

        obox.style.display = 'none';

    }

    obtn.onclick = function ()

    {

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        owrap.style.display = 'block';

        owrap.style.width = Math.max(document.documentElement.clientWidth,document.body.offsetWidth) + 'px';

        owrap.style.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) + 'px';

        obox.style.display = 'block';

        obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px';

        obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px'; 

    };

    window.onscroll = function ()

    {

        if(obox.style.display == 'none') return;

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px';

        obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px';

    };

    window.onresize = function ()

    {

        if(obox.style.display == 'none') return;

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;

        owrap.style.width = Math.max(document.documentElement.clientWidth,document.body.offsetWidth) + 'px';

        owrap.style.height = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) + 'px';    

        obox.style.left = (document.documentElement.clientWidth - obox.offsetWidth )/2 + scrollLeft + 'px';

        obox.style.top = (document.documentElement.clientHeight - obox.offsetHeight )/2 + scrollTop + 'px';

    };

}

</script>

</head>

<body style="height:2000px;">

    <input type="button" value="登陆">

    <div id="wrap"></div>

    <div id="box">

        <a href="javascript:;" id="close">x</a>

            这里是登陆的表单等内容

    </div>

    <div>

</body>

</html>

dom 优酷得弹出的更多相关文章

  1. 深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)

    只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...

  2. iframe弹出窗体丢失焦点的问题

    好像在不同的浏览器都有这个现象,用javascript弹出一个iframe的窗口,第一次input的焦点是正常的, 然后弹出第二次的时候,选择,按钮都可以获取到,但是input无法获得焦点,而且页面不 ...

  3. 仿酷狗音乐播放器开发日志二十六 duilib在标题栏弹出菜单的方法

    转载请说明原出处,谢谢~~ 上篇日志说明了怎么让自定义控件响应右键消息.之后我给主窗体的标题栏增加右键响应,观察原酷狗后可以发现,在整个标题栏都是可以响应右键并弹出菜单的.应该的效果如下: 本以为像上 ...

  4. iOS开发——动画篇Swift篇&炫酷弹出菜单

    炫酷弹出菜单   这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu ...

  5. sweetalert2 全面替代 alert ，从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框和取消 sweetalert2 的 OK 按钮

    1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 3 取消 OK 按钮, 只需要设置 showConfirmBu ...

  6. JavaScript使用DeviceOne开发实战（四）仿优酷视频应用

    开发之前需要考虑系统的差异性,比如ios手机没有回退键,所以在开发时一定要考虑二级界面需要有回退键,否则ios的手机就会陷入到这个页面出不去了.安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连 ...

  7. android之官方导航栏ActionBar(三)之高仿优酷首页

    一.问题概述 通过上两篇文章,我们对如何使用ActionBar大致都已经有了认识.在实际应用中,我们更多的是定制ActionBar,那么就需要我们重写或者定义一些样式来修饰ActionBar,来满足具 ...

  8. layer弹出框插件参数及方法介绍

    layerui下载:http://www.layui.com 更多参数请阅读开发文档:http://www.layui.com/doc/modules/layer.html Layui 是一款采用自身 ...

  9. 关于Layer弹出框初探

    layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,laye ...

随机推荐

  1. winform中关于panel中滚动条和键盘事件几点体会

    最近在做winform开发中,遇到几个比较寄售的问题,通过上网查找计和自己琢磨,最终都圆满解决呢! 现在我将谈谈我在项目中遇到的问题集解决方案,以供大家参考! 一.就是我在使用键盘的keydown事件 ...

  2. 手机号段、ip地址归属地大全，最新手机号段归属地,IP地址归属地数据库

    百事通:http://www.114best.com/dh/114.aspx?w=17097232323,联通识别为电信的,1349错 二三四五:http://tools.2345.com/frame ...

  3. hdu1828(线段树+扫描线)

    又知道了线段树的一种用法,除了单点更新,区间更新,还有这种在一段线段上标号但不往下推. 真是神奇 hdu1828 #include <iostream> #include <stdi ...

  4. 使用git submodule管理一个需要多个分立开发或者第三方repo的项目

    在项目开发中,特别是web前端开发中,有非常多的开源第三方library,我们希望引用他们,同时也希望能够方便地保持这些第三方 开源repo的更新.另外一方面如果我们自己在开发一个网站的项目,这个项目 ...

  5. java.util.logging.Logger使用详解

    一.创建Logger对象   static Logger getLogger(String name)           为指定子系统查找或创建一个 logger. static Logger ge ...

  6. clientTop、clientWidth、offsetTop、offsetWidth、scrollTop

    <div id="drag" class="drag">drag me</div> <script type="text ...

  7. 多线程－NSOperation中使用ASIHttpRequest注意事项

    最近做的iPhone项目中有一如下功能: app在用户许可后将本地Photos的照片上传到服务器,期间用户可以做其他任何操作,等上传成功后弹出一个toast通知用户. 原先的代码结构是: 获取照片的操 ...

  8. UML和模式应用

    引言 Applying UML and Patterns,以一个商店POS系统NextGen和一个掷骰子游戏Monopoly为例,围绕OOA/D的基本原则GRASP,以迭代作为基本方法.以UML为表达 ...

  9. 关于用netbeans和xdebug调试php的配置

    之前用过一段时间在apache,netbeans下通过xdebug调试.感觉不错,最近事情不多想从新配置下,是基于最新版本的php5.4做的,后来参考了下xdebug的官网说明完成的.官网地址:htt ...

  10. tcpdump命令

    tcpdump 抓包 http://blog.sina.com.cn/s/blog_6335d36b0101mrfz.html