Javascript to achieve the effect of closing advertisements

Javascript to achieve the effect of closing advertisements

Here is a case study on how to close ads using Javascript for your reference. The details are as follows:

I am still learning the big front end. Please forgive me if there are any irregular or incorrect codes and ideas. Thank you for your advice.

We can often see annoying small advertisements on web pages, and there is usually a specific position and icon next to the advertisement to close the advertisement. The following JS code is used to simply implement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      border: 0;
    }
    .gg{
      width: 100%;
      height: 300px;
      background-image: url("../images/JD.png");
    }
    .img{
      width: 20px;
      height: 20px;
      float: right;
    }
  </style>
</head>
<body>
<div class="gg">
  <img class="img" src="../images/2.jpg" title="Close">
</div>
<script>
  var gg = document.querySelector('.gg')
  var mg = document.querySelector('img')
  mg.onclick = function () {
    gg.style.display = 'none'
  }
</script>
</body>
</html>

Code Explanation

The principle here is very simple. I put an annoying advertising picture at the bottom of the div, and then put a small icon representing close on it, and placed it in the upper right corner of the small advertisement. Then I get the event, and when it is onclick, the function is triggered. The content of the function is to hide this large div box directly and not display it, thus achieving the purpose of closing the advertisement.

Demonstration effect

Note the upper right corner

After clicking the set location

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • JS realizes closing small advertisement special effects
  • JS implements the code for closing couplet advertising effect
  • JS lower right corner advertising window code (can be shrunk, expanded and closed)
  • js implements the floating ad bar code that can be closed at the top of the website
  • JS implements the left ad code that can be clicked to expand and close
  • JavaScript to achieve advertising closing and display effects example
  • js to achieve the following mouse movement and close the picture advertising example
  • Javascript implements web page floating ad code with close button
  • js pop-up ad code when IE is closed to prevent blocking

<<:  How to change mysql password under Centos

>>:  Problems and solutions for MYSQL5.7.17 connection failure under MAC

Recommend

Use auto.js to realize the automatic daily check-in function

Use auto.js to automate daily check-in Due to the...

mysql8.0.0 winx64.zip decompression version installation and configuration tutorial

This article records the installation tutorial of...

25 Vue Tips You Must Know

Table of contents 1. Limit props to type lists 2....

How to prevent hyperlinks from jumping when using a link

When using <a href="" onclick="&...

js implements a simple shopping cart module

This article example shares the specific code of ...

How to install mysql in docker

I recently deployed Django and didn't want to...

HTML table tag tutorial (20): row background color attribute BGCOLOR

The BGCOLOR attribute can be used to set the back...

Solution to the problem that mixin does not work in scss (browser cannot compile it)

Mixin method: The browser cannot compile: The old...

Let the web page redirect to other pages after opening for a few seconds

Just add the following code to achieve it. Method ...

How to copy MySQL table

Table of contents 1.mysqldump Execution process: ...

Summary of some thoughts on binlog optimization in MYSQL

question Question 1: How to solve the performance...

Installing Docker Desktop reports an error message: WSL 2 installation is incomplete (Solve the error message)

Error description When we install Docker Desktop,...

How to start and restart nginx in Linux

Nginx (engine x) is a high-performance HTTP and r...

Three ways to jump to a page by clicking a button tag in HTML

Method 1: Using the onclick event <input type=...

Some settings of Div about border and transparency

frame: Style=”border-style:solid;border-width:5px;...