编写弹窗并居中-白红宇

编写弹窗并居中

阅读量：4918 次

发布时间：2019-06-11

本文共 1326 字，大约阅读时间需要 4 分钟。

知识点：1、字符创不能分行写；

　　　　2、div在窗口中居中的方法：让div的left和top分别为：($(window).width()-$("div").width())/2;($(window).height()-$("div").height())/2;

　　　　3、当窗口滚动或者调整大小时，让div的left和top分别为在原来的基础上加上滚动距离：$(window).scrollLeft()和$(window).scrollTop()

<!DOCTYPE html>

<head>

<style>

body{height:2000px;}

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

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

</style>

<title>编写弹窗并居中</title>

$(function(){

　　var bd=$("body");

　　var btn=$('<input type="button" value="点击">');

　　bd.append(btn);

　　btn.click(function(){

　　　　var log=$('<div id="login"><label for="user">用户名：<input type="text" name="user"></label><br><label for="pass">密码：<input 　　　　　type="password" name="pass"></label><br><div id="close">X</div></div>');

　　bd.append(log);

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

　　log.remove();

　　});

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

　　log.css('top',($(window).height()-log.outerHeight())/2);

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

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

　　log.css("top",($(window).height()-log.outerHeight())/2+$(window).scrollTop());

　　　　});

</script>

</head>

<body>

</body>

</html>

转载于:https://www.cnblogs.com/annie211/p/5855625.html

你可能感兴趣的文章