<!doctype html>

<html>

<head>

<meta charset="utf-8">

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

<style>

*{

    margin:0;

    padding:0;}

#login{

    width:400px;

    height:300px;

    position:absolute;

    border:1px #CCCCCC solid;

    padding:15px;

    }

#close{

    position:absolute;

    right:0px;

    top:0px;

    cursor:pointer;

    }

</style>

<script type="text/javascript" src="jquery-1.11.2.js"></script>

<script>

$(function ()

{

    $('#btn').click(function ()

    {

        var ologin = $('<div id="login"><p>用户名：<input type="text"></p><p>密码：<input type="password"></p><div id="close">X</div>)</div>');

        $('body').append(ologin);

        ologin.css('left',($(window).width() - ologin.outerWidth())/2);

        ologin.css('top',($(window).height() - ologin.outerHeight())/2 + $(window).scrollTop());

        $('#close').click(function ()

        {

            ologin.remove();

        })

    })

})

</script>

</head>

<body>

<input type="button" id="btn" value="点击">

</body>

</html>

jq 弹出窗口的更多相关文章

  1. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  2. layer：好看的弹出窗口

    layer是一款web弹层组件,只需在调用时简单地配置相关参数,即可轻松实现丰富与便捷的操作体验. 这是layer的官方地址,里面的使用介绍非常详细(http://layer.layui.com/) ...

  3. jQuery弹出窗口浏览图片

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/3.htm HTML文件代码: <!DOCTYPE HTML> <html> < ...

  4. EasyUI弹出窗口实例

    效果体验:http://hovertree.com/texiao/jeasyui/1.htm 源代码下载:HovertreeJEasyUI HTML文件代码: <!DOCTYPE html> ...

  5. 让IE8在win7下面能显示使用window.showmodaldialog弹出窗口的地址状态栏

    问题来源:最近又要对老的系统进行改善,由于用到了window.showmodaldialog这个方法弹出窗口,比如从主界面弹出新增或者修改窗口,如下图所示,显示没有地址栏,进行代码修改还要找到相应的文 ...

  6. java selenium (十二) 操作弹出窗口

    selenium 中如何处理弹出窗口 阅读目录 原理 在代码里, 通过         Set<String> allWindowsId = driver.getWindowHandles ...

  7. JSP弹出窗口和模式对话框

    本文转载于其它blog,在此向本文原创者,致意!    JSP 弹出窗口  一.window.open() 基础知识      1.window.open()支持环境:  JavaScript1.0+ ...

  8. [转]js来弹出窗口的详细说明

    1.警告对话框 <script> alert("警告文字") </script> 2.确认对话框 <script> confirm(" ...

  9. OAF_开发系列08_实现OAF通过Popup参数式弹出窗口（案例）

    20150711 Created By BaoXinjian

随机推荐

  1. visual studio 中删除多余的空白行

    替换  Ctrl+H  正则  勾选  替换 ^\s*\n 为空

  2. Qt之HTTP上传/下载

    简述 在前面章节中我们讲述了关于Qt显示网络图片的内容,比较简单,因为图片一般都比较小,下载到本地速度比较快,所以基本不需要什么特殊处理,本节我们主要针对HTTP实现上传/下载进行详细的讲解与分享,包 ...

  3. HDU 2870 Largest Submatrix

    这三道题的关系是这样的,1505是1506的加强版,2870又是1505的加强版 如果按照上面由简到易的顺序来做的话,还是很简单的 这道题的思想就是 枚举+DP 因为某些字符可以变值,所以我们枚举a, ...

  4. openerp 7 在ubuntu上设置开机启动

    我们要让openerp开机运行起来. 第一步,先进入系统目录: cd /etc/init.d 第二步,创建文件.命名为openerp-server sudo vi openepr-server 第三步 ...

  5. mysql约束（自己原先总结的有点不准）

    约束* 约束是添加在列上的,用来约束列的! 1. 主键约束(唯一标识) ****非空*** ****唯一*** ****被引用****(学习外键时) * 当表的某一列被指定为主键后,该列就不能为空,不 ...

  6. HDU 5328 Problem Killer（水题）

    题意: 给一个序列,要找一个等差或等比的连续子序列,求其最长的长度. 思路: 扫两遍,判断等差或等比即可.从左往右扫,维护一个滑动窗口,考虑新加进来的数,如果满足了要求,则更新长度,否则只留最后两个数 ...

  7. HDU 1023 Train Problem II (卡特兰数，经典)

    题意: 给出一个数字n,假设火车从1~n的顺序分别进站,求有多少种出站序列. 思路: 卡特兰数的经典例子.n<101,用递推式解决.需要使用到大数.n=100时大概有200位以下. #inclu ...

  8. android 自定义控件中获取属性的三种方式(转)

    第一种方法,直接设置属性值,通过attrs.getAttributeResourceValue拿到这个属性值. (1)在xml文件中设置属性值 <com.example.activity.Ico ...

  9. Android之Notification的多种用法(转)

    我们在用手机的时候,如果来了短信,而我们没有点击查看的话,是不是在手机的最上边的状态栏里有一个短信的小图标提示啊?你是不是也想实现这种功能呢?今天的Notification就是解决这个问题的. 我们也 ...

  10. html常用笔记

    <?php //CSS可以对文本格式进行精确的控制 //HTML标记更有利于搜索引擎 //一.标签 <br> <p>//换行后插入一个空行,单字节不换行,双字节自动换行 ...