怎么实现jquery弹窗，代码自取

2022/6/22 4:19:47

编程Tag： jQuery

本文主要是介绍怎么实现jquery弹窗，代码自取，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

今天给大家说一说怎么实现jquery弹窗，有需要的同学可以作为参考，说不多说直接上代码：

<!DOCTYPE html>

<html>

<head>

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

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

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

</style>

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

// window.onload=function(){

// document.createElement('div');

// }

// 使用jQuery创建：$('<div>');带尖括号的是创建，不带是选择的意思

$(function(){

// var oDiv=$('<div>');

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

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

var oLogin=$('<div id="login"><p>用户名<input type="text"></p><p>密码<input type="text"></p><div id="close">X</div></div>');//此功能就相当于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());

})

});

</script>

</head>

<body>

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

</div> -->

</body>

</html>

以上就是关于怎么实现jquery弹窗的全部内容，希望对大家的学习有所帮助，更多内容还可关注慕课网~

这篇关于怎么实现jquery弹窗，代码自取的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！