jQuery实现简单弹出窗口

最新推荐文章于 2024-08-06 10:37:21 发布

yzxzsp11

最新推荐文章于 2024-08-06 10:37:21 发布

阅读量606

点赞数

分类专栏： javascript 文章标签： jquery

本文链接：https://blog.csdn.net/yzxzsp11/article/details/50636374

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery弹出框</title>
</head>
<body>
<input type="button" value="菜单" id="btn1"/>
<!--弹出窗口部分代码-->
<!--<div style="height: 200px;width: 300px;position: absolute;border: 1px solid skyblue" id="login">-->
    <!--Username:<input type="text" />-->
    <!--<br/>-->
    <!--Password:<input type="password" />-->
    <!--<input type="button" value="close" id="close" style="position: absolute;left: 100px;top:150px"/>-->
<!--</div>-->

</body>
<script src="jquery-2.2.0.min.js"></script>
<script>
    $(function(){
        $('#btn1').click(function(){
            var oLogin=$('<div style="height: 200px;width: 300px;position: absolute;border: 1px solid skyblue" id="login">Username:<input type="text" /> <br/>Password:<input type="password" /> <input type="button" value="close" id="close" style="position: absolute;left: 100px;top:150px"/> </div>');
            $('body').append(oLogin);
            oLogin.css('left',($(window).width()-oLogin.outerWidth())/2);
            oLogin.css('top',($(window).height()-oLogin.outerHeight())/2);

            $('#close').click(function(){   //关闭按钮
                oLogin.remove();
//                $('#login').remove();
            });

        });

    })
</script>
</html>