• 编写弹窗 并居中


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

  • 相关阅读:
    geotrellis使用(二十八)栅格数据色彩渲染(多波段真彩色)
    我的2016,感恩、乐观、努力
    我的奋斗——从印刷工人到地理信息大数据系统程序员
    geotrellis使用(二十七)栅格数据色彩渲染
    用户画像
    栈和队列在python中的实现
    跳一跳第一天总结
    在pycharm中使用scrapy爬虫
    用户使用手册
    项目测试报告和用户使用手册
  • 原文地址:https://www.cnblogs.com/annie211/p/5855625.html
Copyright © 2020-2023  润新知