How to create floating banner ads, images, and Giifs, with a close button

Learn How to create floating banner ads, images, and Giifs, with a close button by HTML , CSS, and JAVASCRIPT by Ar3school

HTML code:

<!DOCTYPE html>



  <title>Floating Image with Close Button</title>

  <link rel="stylesheet" href="styles.css">



<div class="floating-image" id="floatingImageContainer">

  <img src="" alt="Floating Image" id="floatingImage">

  <span class="close-button" onclick="closeImage()">Close</span>


<script src="script.js"></script>



CSS code;

/* Style for the floating image container */
.floating-image {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 5px;

/* Style for the close button */
.close-button {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;


function closeImage() {
  var floatingImageContainer = document.getElementById("floatingImageContainer"); = "none";


This example creates a simple HTML page that contains a floating image, banner or Gifs positioned at the bottom right of the page with a close button (represented by the 'Close' character). Clicking the close button triggers the closeImage() function, which hides the entire floating image container.

Replace the image URL with the path to your desired image. Adjust the styles and content as needed to fit your requirements.

Comments :

Post a Comment