jQuery-弹窗登录

在jQuery中实现弹窗常要用到的方法有：

width()  ：元素的宽度

outerWidth()  元素的宽度 盒子的padding+border 总的宽度

scrollTop()  鼠标滚轮自上而下滑过的距离

remove()  移出元素

append（）元素的位置操作

首先动态创建出基本结构：

var load=$('<div id="show"><p>用户名<input type="text"></p><p>密&nbsp&nbsp码<input type="password"></p><div id="close">x</div></div>')//注意单双引号  否则浏览器会报错

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

基本的元素创建完成之后  只需要判断位置就行  此处居中显示

load.css('left',($(window).width()-load.outerWidth())/2)  //窗口的宽度-盒子的宽度 /2  得到是居中的位置
load.css('top',($(window).height()-load.outerHeight())/2) //高度同理

为关闭按钮添加事件

$('#close').click(function(){
$('#show').remove();
})

动态获取浏览器宽度和鼠标滚轮的距离 使盒子始终居中显示

(window).on('resize scroll' ,function(){
load.css('left',($(window).width()-load.outerWidth())/2)
load.css('top',($(window).height()-load.outerHeight())/2+$(window).scrollTop())
})