jQuery练习t121

最新推荐文章于 2024-09-16 08:47:17 发布

虾米大王

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量196

点赞数

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

本文链接：https://blog.csdn.net/modern358/article/details/112989067

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-size: 13px;
        }
        .frame{
            width: 276px;
            height: 100px;
            border: 1px solid #CCCCCC;
            display: none;
        }
        .frame .title{
            font-weight: bold;
            width: 260px;
            padding: 8px;
            background-color: #EEEEEE;
        }
        .frame .content{
            padding: 15px 8px;

        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .cls{
            clear: both;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top",($(window).height() - this.height()) /2
                + $(window).scrollTop() + "px");
            this.css("left",($(window).width() - this.width()) /2
                + $(window).scrollLeft() + "px" );
            return this;
        }
    </script>
    <script>
        $(function () {
           $(".frame").center().show("normal");

           $(".title").find("img").bind("click",function () {
               $(".frame").hide("normal");
           })
        });
    </script>
</head>
<body>
    <div class="frame">
        <div class="title fl">
            <div class="fl">主题</div>
            <div class="fr">
                <img src="images/close.png"alt="close">
            </div>
        </div>
        <div class="content cls">内容</div>
    </div>
</body>
</html>