php jquery实现弹窗,简单实现jQuery弹窗方法

本文实例为大家分享了jQuery弹窗效果展示的具体代码，供大家参考，希望对大家有帮助，具体内容如下:

;

弹窗

*{margin: 0px;padding: 0px;}

#login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; }

#close{position: absolute;right: 0px;top: 0px;}

// JS创建一个p标签，也就是节点元素

// window.οnlοad=function(){

// document.createElement('p');

// }

// 使用jQuery创建：$('

');带尖括号的是创建，不带是选择的意思

$(function(){

// var op=$('

');

// $('body').append(op);

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

var oLogin=$('

用户名

密码

X

');//此功能就相当于body中注释的代码

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

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

oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);//是弹窗能够出现在浏览器的中间

$("#close").click(function(){

oLogin.remove();

})

// jquery 中$()里window不用加引号

// 添加resize()浏览器窗口大小改变

// scroll():滚动条，以下的作用是当滚动条滚动时候，弹窗的位置也不变化

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

oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());

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

})

});

});

用到的点：

jQuery创建：$('

');

弹窗的位置：

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

oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);

当滚动条滚动时候，弹窗的位置变化：

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

oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());

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

})

相关推荐：