iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

我的網頁前端小小小教室系列 第 29

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>

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

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


上一篇
Day28 JQuery應用
下一篇
Day30 JQuery 控制CSS
系列文
我的網頁前端小小小教室30

1 則留言

0
wesleybabytw
iT邦新手 5 級 ‧ 2021-11-01 08:52:14

請問用IE可正常關閉蓋板廣告,Chrome卻不行,原因為何呢?

我要留言

立即登入留言