Day29 JQuery盖板广告应用

昨天介绍了JQuery点击隐藏的用法，今天要做一些稍为的延伸，建立一个盖板广告後，点击旁边盖板逛告消失，这在我们网页中也是非常的常见，就让我们看下去怎麽做吧!

我们先建立段落30个跟盖板广告还有关闭按钮的html。

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, corporis cum? Itaque, repellendus soluta! Voluptas maiores rerum eligendi dignissimos? Nemo excepturi saepe voluptatibus deserunt porro veritatis perferendis optio. Quas, odit.</p>

    <div class="full-AD">
        <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, fugiat deserunt. Tempora iure maiores aliquid sint labore voluptas assumenda accusamus eaque est totam quod recusandae asperiores, veniam omnis sed quis!
            <a href=""  class="btn-close">X</a>
        </div>
    </div>

第二步，设定CSS属性。

.full-AD{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(0, 0, 0, .5);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .full-AD .text{
            width: 100%;
            max-width: 400px;
            background-color: white;
            padding: 15px;
            position: relative;
        }

        .full-AD .btn-close{
            position: absolute;
            text-decoration: none;
            background-color: tomato;
            width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            top: 0px;
            right: 0px;
        }

完成了盖板广告的html及css设定以後，接下来就要做我们今天的正题拉!
使用JQuery，让点击X键以後关闭盖板广告。

<script>
        $(document).ready(function () {
                // 做事的地方
            $('.btn-close').click(function () {
                $('.full-AD').hide();
            })

        })
    </script>