<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script src="../../jq-practice/jq/jquery-2.2.1.min.js"></script>

    <script>

        $(function(){

            $('.input1').click(function(){

                var oLogin=$('<div class="login"> <p>用户名：<input type="text" /></p> <p>密码：<input type="text" /></p> <div class="closeIcon">X</div> </div>');

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

                oLogin.css('left',($(window).width()-oLogin.width())/);

                oLogin.css('top',($(window).height()-oLogin.height())/);

                $(window).on('resize scroll',function(){

                    oLogin.css('left',($(window).width()-oLogin.width())/);

                    oLogin.css('top',($(window).height()-oLogin.height())/ + $(window).scrollTop());

                })

                $('.closeIcon').click(function(){

                    oLogin.remove();

                })

            })

        })

    </script>

    <style>

        .login{

            position: absolute;

            width: 300px;

            height: 300px;

            border: 1px solid red;

        }

        .closeIcon{

            position: absolute;

            right: 0px;

            top:0px;

        }

    </style>

</head>

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

<input type="button" value="点击" class="input1"/>

<!--<div class="login">-->

    <!--<p>用户名：<input type="text" /></p>-->

    <!--<p>密码：<input type="text" /></p>-->

    <!--<div class="closeIcon">X</div>-->

<!--</div>-->

</body>

</html>

jQuery实例-简单选项卡-【一些常见方法（2）-练习】的更多相关文章

  1. Jquery&JS简单选项卡

    结果,如图 为了明显,用绿色+红色 第一步:静态布局 先写html代码和css样式 要点一:  ul li都为块级元素,可以用height,但是里面字体不居中,我们用line-height,即达到居中 ...

  2. Jquery实现简单选项卡

    <html> <head> <meta charset="UTF-8"> <title>选项卡</title> < ...

  3. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  4. 三种动态加载js的jquery实例代码另附去除js方法

    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...

  5. vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  6. vue教程2-04 vue实例简单方法

    vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...

  7. PHP+jQuery开发简单的翻牌抽奖实例

    PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: <ul ...

  8. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  9. JQuery常见方法

    <!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. iOS- iPad UIPopoverController

    在IPAD开发中,有一个很有趣的视图控制器,UIPopoverControllr,它的初始化必须要设置一个"内容视图",相当于它本身只是作为一个“容器”,而显示的内容还需要另外一个 ...

  2. js防刷新的倒计时

    近期在维护考试系统,在进行考试測试时无意中点击了刷新button.可是上面的倒计时并没有受到影响.同一时候在几篇博客中也有这种样例,所以我想看看它究竟是如何防止刷新的. 假设是用cs代码写.我们可能会 ...

  3. Libgdx Box2D真实---这缓释微丸（三：规则经常使用body和精灵联合）

    介绍规则body怎样和图片结合.上一篇文章我介绍了box2D的基本知识,假设你用心的话.你会搜索网上相关简单demo吧.那些我就不写了.那么假设我用图片表示我的那个body.而不是简单线条.那该怎么办 ...

  4. 正则匹配ab不匹配aab

    var a = "aababaabababababaab"; a.replace(/(^|[^a])(ab)+/g, "$1"); var a = " ...

  5. 浅谈ASP脚本的解释

    10多年前,ASP的出现使全世界的WEB设计者摆脱了C/C++的繁杂,大幅提升了页面的开发效率 然而一直到数年之后,asp的解释一直握在微软手里,后来阿帕奇也支持asp了,虽然没有IIS那么强大,但是 ...

  6. Pitfalls of the Hibernate Second-Level / Query Caches--reference

    This post will go through how to setup the Hibernate Second-Level and Query caches, how they work an ...

  7. 正则表达式 之 C#后台应用

    正则表达式在.Net就是用字符串表示,这个字符串格式比较特殊,无论多么特殊,在C#语言看来都是普通的字符串,具体什么含义由Regex类内部进行语法分析. Regex 类 存在于 System.Text ...

  8. JS 笔记

    如何定义一个函数呢?基本语法如下: function 函数名() {      函数代码; } 说明: 1. function定义函数的关键字. 2. "函数名"你为函数取的名字. ...

  9. 通过scrollerview自定义collectionview(常用于推荐关注界面)

    最近项目上要实现一个效果,先把效果图摆上来吧: 刚看到效果图的时候  我觉得很简单  用UICollectionview就可以了 但是后来发现collectionview只有两种布局方式  比较单一 ...

  10. Hibernate - list()和iterate()的区别

    list()和iterate()都可以用来获得Query取得的HQL结果list()使用的是即时加载.查询时会之前去数据库查询HQL并将所有结果存在缓存中.iterate()使用的是延时加载.查询时只 ...