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>

  • 相关阅读:
    六. 异常处理5.多重catch语句的使用
    六. 异常处理4.try和catch的使用
    六. 异常处理3.未被捕获的异常
    六. 异常处理2.异常类型
    对mysql数据库中字段为空的处理
    mysql 中实现多条数据同时更新
    java 用PDFBox 删除 PDF文件中的某一页
    java7 java MethodHandle解析
    【十四】jvm 性能调优实例
    【十三】jvm 性能调优工具之 jstack
  • 原文地址:https://www.cnblogs.com/annie211/p/5855625.html
Copyright © 2011-2022 走看看