• 编写弹窗 并居中


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

  • 相关阅读:
    nopCommerce添加支付插件
    nopCommerce的配置以及汉化
    面试题-螺旋矩阵
    Eratosthenes筛选法
    rtp传输音视频(纯c代码)
    ts文件分析(纯c解析代码)
    h265文件分析(纯c解析代码)
    mpeg4文件分析(纯c解析代码)
    flv文件解析(纯c解析代码)
    mpeg2文件分析(纯c解析代码)
  • 原文地址:https://www.cnblogs.com/annie211/p/5855625.html
Copyright © 2020-2023  润新知