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>

  • 相关阅读:
    关于echarts、layer.js和jqGrid的知识点
    Aspose.Cell和NPOI生成Excel文件2
    Aspose.Cell和NPOI生成Excel文件
    关于JS嵌套点击事件的问题。
    有关二维码学习小整理
    二维码
    微信扫码登录实现原理
    C#模拟Http与Https请求框架实例
    C#中调用user32.dll库的keybd_Event函数,操作键盘
    对象数组 深拷贝
  • 原文地址:https://www.cnblogs.com/annie211/p/5855625.html
Copyright © 2011-2022 走看看