昨天介紹了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>

這樣子就完成我們今天的蓋板廣告拉!

參考資料:https://www.youtube.com/watch?v=CDO8AkK2HnE&list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre&index=27