编写弹窗 并居中

知识点: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>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<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>
<script src="jquery.min.js"></script>
<script>
$(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>

posted @ 2016-09-09 10:28  2350305682  阅读(205)  评论(0编辑  收藏  举报