<!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. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  2. hibernate的三种状态(儿)

    第五讲:hibernate的三种状态 瞬时:bean对象与session,与数据库无关.在session对象的save方法保存之前. 持久状态(托管):bean对象与session有关,数据库中有对应 ...

  3. nodetree中 前面复选框禁用插件

    nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...

  4. hql得到一个实体的数量

    Session session=this.getSession;string hql="select count(tb) from table tb";Query query=se ...

  5. website architecture

    如果在不仔细考虑网站架构的情况下就去做一个网站,这就像在没有规划行程前而去贸然旅行.你可能最终到了你的目的终点,但是你可能也不知道在这过程中,你已经走过了多少的弯路.做网站适用同样的道理.在开工之前, ...

  6. postgresql大批量数据导入方法

    一直没有好好关注这个功能,昨天看了一下,数据库插入有瓶颈,今天研究了一下: 主要有以下方案: 1.使用copy从文件导入: copy table_001(a, b, "f", d, ...

  7. LeetCode Linked List Cycle II 单链表环2 （找循环起点）

    题意:给一个单链表,若其有环,返回环的开始处指针,若无环返回NULL. 思路: (1)依然用两个指针的追赶来判断是否有环.在确定有环了之后,指针1跑的路程是指针2的一半,而且他们曾经跑过一段重叠的路( ...

  8. 移动金融APP分析

    最近研究了移动互联网金融APP的情况,分享给大家. 这是官方关于互联网金融的范围,包括支付.借贷.众筹.基金.保险和信托. 典型的APP 绑卡的流程普遍采用的四要素鉴权:姓名,身份证,卡号以及银行预留 ...

  9. PDO防注入原理分析以及使用PDO的注意事项 (转)

    我们都知道,只要合理正确使用PDO,可以基本上防止SQL注入的产生,本文主要回答以下两个问题: 为什么要使用PDO而不是mysql_connect? 为何PDO能防注入? 使用PDO防注入的时候应该特 ...

  10. javamail模拟邮箱功能发送电子邮件-基础实战篇（javamail API电子邮件实例）

    引言: JavaMail 是一种可选的.能用于读取.编写和发送电子消息的包 JavaMail jar包下载地址:http://java.sun.com/products/javamail/downlo ...