jQuery初试弹窗-low

最新推荐文章于 2022-10-31 19:06:39 发布

只看五分钟佩奇的小姑姑

最新推荐文章于 2022-10-31 19:06:39 发布

阅读量315

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Aloe_904/article/details/78387053

版权

前端的尘封往事专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹窗</title>
        <script type="text/javascript" src="../jquery-3.2.1.min.js"></script>

        <style type="text/css">
            *{margin: 0px;padding: 0px;}
            #login{height:300px;width: 300px;border: 1px solid #ddd;position: absolute; }
            #close{position: absolute;right: 0px;top: 0px;}
        </style>


        <script type="text/javascript">

        // JS创建一个div标签，也就是节点元素
        //  window.onload=function(){
        //      document.createElement('div');
        //  }

        // 使用jQuery创建：$('<div>');带尖括号的是创建，不带是选择的意思
        $(function(){
         // var oDiv=$('<div>');
         // $('body').append(oDiv);

         $('input').click(function(){
            var oLogin=$('<div id="login"><p>用户名<input type="text"></p><p>密码<input type="text"></p><div id="close">X</div></div>');//此功能就相当于body中注释的代码

            $('body').append(oLogin);
            oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
            oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);//是弹窗能够出现在浏览器的中间

            $("#close").click(function(){
                oLogin.remove();
            })

            // jquery 中$()里window不用加引号
            // 添加resize()浏览器窗口大小改变
            // scroll():滚动条，以下的作用是当滚动条滚动时候，弹窗的位置也不变化
            $(window).on("resize scroll",function(){
                oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
                oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
            })

         });

        });

        </script>
</head>
<body>
    <input type="button" value="点击">
    <!-- <div id="login">
        <p>用户名<input type="text"></p>
        <p>密码<input type="text"></p>
        <div id="close">X</div>
    </div> -->
</body>
</html>

用到的点：

jQuery创建：$('<div>');

弹窗的位置：

oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2);

当滚动条滚动时候，弹窗的位置变化：

$(window).on("resize scroll",function(){
oLogin.css('left',($(window).width()-oLogin.outerWidth())/2+$(window).scrollLeft());
oLogin.css('top',($(window).width()-oLogin.outerHeight())/2+$(window).scrollTop());
            })

只看五分钟佩奇的小姑姑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery初试弹窗-low

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹窗</title> <script type="text/javascript" src="../jquery-3.2.1.min.js"></script> <style type="text/css">
复制链接

扫一扫