zoukankan      html  css  js  c++  java
  • 编写弹窗 并居中

    知识点: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{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>

  • 相关阅读:
    Door Frames CodeForces
    POJ 3090 Visible Lattice Points (ZOJ 2777)
    从斐波那契到矩阵快速幂
    Recursive sequence (矩阵快速幂)2016ACM/ICPC亚洲区沈阳站
    c++ 类实现 AVL树容器(包含迭代器)
    c++ 链表类的实现(包含迭代器)
    HDU
    【几何+模拟】二次元变换 计蒜客
    【bfs+链式向前星】防御僵尸(defend)计蒜客
    deque in Python
  • 原文地址:https://www.cnblogs.com/annie211/p/5855625.html
Copyright © 2011-2022 走看看