<!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. itnesse实现api接口自动化测试学习

    上午在园子里乱逛,看了不少小伙伴们分享的接口测试方面的知识,大家所叙述到的一些经验或多或少,我也曾遇到过,突然意识到知识的点滴积累是多么的重要,我记得我最早接触接口测试的时候,就是只在浏览器里人工测试 ...

  2. VMware虚拟机中的常用文件介绍

    虚拟机的文件管理由VMware Workstation来执行.一个虚拟机一般以一系列文件的形式储存在宿主机中,这些文件一般在由workstation为虚拟机所创建的那个目录中. 如下图所示:(< ...

  3. 在Java中直接调用js代码

    JDK1.6版添加了新的ScriptEngine类,允许用户直接执行js代码. 在Java中直接调用js代码 不能调用浏览器中定义的js函数,会抛出异常提示ReferenceError: “alert ...

  4. jquery ajax 开发手记

    1.json解析的格式要求更严格了,必须全部加引号,否则无法识别 {"result":"false"} 2.ashx如果要使用Session需要继承接口IReq ...

  5. UVa 10878 Decode the tape

    题目很简单,代码也很短.第一遍做的时候,我居然二乎乎的把input里面的小框框忽略掉了,所以WA了一次. 每一行代表一个二进制的ASCII码,'o'代表1,空格代表0,中间的小黑点忽略. 我直接把一行 ...

  6. A1486. 树（王康宁）

    题目:http://www.tsinsen.com/A1486 题解: 其实看到和路径有关的就应该想到点分治. 我们找出重心之后遍历每一棵子树得到它的 { x=经过特殊点的个数,y=到rt的异或和} ...

  7. over-fitting、under-fitting 与 regularization

    机器学习中一个重要的话题便是模型的泛化能力,泛化能力强的模型才是好模型,对于训练好的模型,若在训练集表现差,不必说在测试集表现同样会很差,这可能是欠拟合导致:若模型在训练集表现非常好,却在测试集上差强 ...

  8. db2数据库创建一张表，并为该表加上主键递增的性能和中间表的创建的sql语句

    创建角色表 CREATE TABLE NBCTXP.TBL_NBC_NONBANKROLE (    ID BIGINT NOT NULL,    ROLENAME VARCHAR(50),    C ...

  9. 【转】Android 服务器之SFTP服务器上传下载功能

    原文网址:http://blog.csdn.net/tanghua0809/article/details/47056327 本文主要是讲解Android服务器之SFTP服务器的上传下载功能,也是对之 ...

  10. Java 循环语句之多重循环

    循环体中包含循环语句的结构称为多重循环.三种循环语句可以自身嵌套,也可以相互嵌套,最常见的就是二重循环.在二重循环中,外层循环每执行一次,内层循环要执行一圈. 如下所示: 例如:使用 * 打印长方形: ...