ajax实现模块弹窗，简单实现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创建⼀个div标签，也就是节点元素
// window.οnlοad=function(){
// ateElement('div');
// }
// 使⽤jQuery创建：$('
')；带尖括号的是创建，不带是选择的意思
$(function(){
// var oDiv=$('
');
// $('body').append(oDiv);
$('input').click(function(){
var oLogin=$('
⽤户名
密码
X
');//此功能就相当于body中注释的代码
$('body').append(oLogin);
jquery是什么有什么作用oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);//是弹窗能够出现在浏览器的中间
$("#close").click(function(){
})
// 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()); })
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。