<!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. Setup Entity Framework Environment

    http://www.entityframeworktutorial.net/EntityFramework5/setup-entityframework-environment.aspx Entit ...

  2. leetcode:Search for a Range（数组，二分查找）

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  3. C#随机颜色和随机字母

    //随机获取颜色 public System.Drawing.Color GetRandomColor() { Random RandomNum_First = new Random(Guid.New ...

  4. （转载）NSTimer

    转自:http://www.cnblogs.com/smileEvday/archive/2012/12/21/NSTimer.html 看到这个标题,你可能会想NSTimer不就是计时器吗,谁不会用 ...

  5. poj 1465 Multiple（bfs+余数判重）

    题意:给出m个数字,要求组合成能够被n整除的最小十进制数. 分析:用到了余数判重,在这里我详细的解释了.其它就没有什么了. #include<cstdio> #include<cma ...

  6. jquery 获取和设置 select下拉框的值(转手册)

    ##实例应用中遇到的问题 //在某事件响应的应用中设置select选中项,前两种情况的设置不生效,使用了最后一种用法才生效的 //$("#select_time").find(&q ...

  7. 【转】linux驱动程序中的并发控制

    原文网址:http://www.cnblogs.com/geneil/archive/2011/12/03/2274684.html 现代操作系统有三大特性:中断处理.多任务处理和多处理器.这些特性导 ...

  8. RequireJS 2.0 正式发布（转）

    RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0 ...

  9. 表单Ext.form.FormPanel(转)

    1.表单 对于传统的b/s应用来说,数据录入元素是放在表单<form>标签里面的.而对于ExtJS应用来说,则可以直接使用FormPanel控件来存放表单中的元素.FormPanel继承自 ...

  10. 输出图片的php代码前面不能有空白行

    第一行增加一个空白行,就至少会输出一个换行符在图片数据流的前面而图片是按图片流提供的信息显示的,前面多了内容就无法解析了.