Scribd
Upload
4 views4 pages

Sticky Ad Close Button Script

The document contains HTML and CSS code for creating sticky advertisement containers at the top and bottom of a webpage. Each container includes a close button that, when clicked, removes the respective advertisement from the page. The design ensures that the advertisements are fixed in position and styled for visibility.

Uploaded by

ntrniraz
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views4 pages

Sticky Ad Close Button Script

The document contains HTML and CSS code for creating sticky advertisement containers at the top and bottom of a webpage. Each container includes a close button that, when clicked, removes the respective advertisement from the page. The design ensures that the advertisements are fixed in position and styled for visibility.

Uploaded by

ntrniraz
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<div class="pro_ad_top_sticky_container">

<div class="pro_ad_container_9">

<div id="top-sticky-close-icon" class="remove-sticky">

Close Ad

</div>

</div>

</div>

<div class="pro_ad_bottom_sticky_container">

<div class="pro_ad_container_10">

<div id="bottom-sticky-close-icon" class="remove-sticky">

Close Ad

</div>

</div>

</div>

<style>

.pro_ad_top_sticky_container {

position: fixed;

top: 0;

left: 50%;

width: auto;

transform: translate(-50%);

z-index: 1000;
justify-content: center;

background-color: transparent;

min-height: 50px;

display: flex;

flex-direction: column;

justify-content: flex-start;

align-items: center;

width: 100%;

.pro_ad_bottom_sticky_container {

position: fixed;

bottom: 0;

left: 50%;

width: auto;

transform: translate(-50%);

display: flex;

align-items: center;

justify-content: center;

z-index: 1000;

background-color: transparent;

min-height: 50px;

#bottom-sticky-close-icon {

position: absolute;

width: fit-content;

top: -20px;

right: 0;

background-color: #8076e6;

color: #fff;
font-size: 14px;

padding: 2px 8px;

border-radius: 5px 5px 0 0;

z-index: 1000000;

#top-sticky-close-icon {

position: absolute;

width: fit-content;

background-color: #8076e6;

color: #fff;

font-size: 14px;

padding: 2px 8px;

border-radius: 0 0 5px 5px;

z-index: 1000000;

</style>

<script>

[Link]("top-sticky-close-icon").addEventListener("click", function
() {

var topAdContainer = [Link](".pro_ad_container_9");

if (topAdContainer) {

[Link](topAdContainer);

});

[Link]("bottom-sticky-close-
icon").addEventListener("click", function () {

var bottomAdContainer = [Link](".pro_ad_container_10");

if (bottomAdContainer) {

[Link](bottomAdContainer);

});
</script>

You might also like