Pop up window with HTML CSS JS

HTML-CSS
1

Hi guys,

can you help me out, please, on how to create a pop up window like the one that welcomes you at t the following site: https://coolors.co/ .
The idea will be displaying a pic when you arrive on the site (i was thinking about using js or jquery, maybe the: .onload or maybe $( document ).ready()) with black fading background and when you click on an “X” top right of the pic or anywhere else but on the image, the div disappear and you’ll see the body content.
Below a sample of what the HTML and CSS files I think should look like (if someone is keen to help can fill them in):

HTML
<body>
<div class="fading-container">
      <img id="fading-img" src="#" alt="">
    </div>
</body>

CSS
body {
  background-image: url("pic.png");
  background-size: cover;
  color: rgb(11, 57, 84); 
  }
.fading-container {

}

#fading-img {

}

js

I hope my request has been clear enough :slight_smile:

Thanks!

3

Hi Randell,

thanks for your reply.

And a very good point on try to let me do it by myself first.

I kind of figured it out just after posting my request :slight_smile: (but I spent a lot of time before) :

HTML

<html lang="en">
  <head>
    <title>⭐ Portasogni ⭐</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="/images/verde perle sopra.jpg">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link rel="stylesheet" href="style.css">
    <script src="jquery-3.6.0.js"></script>
  </head>
  <body>
    <div class="fading-container">
      <img id="fading-img" src="images/IMG-20210414-WA0009.jpg" alt="">
    </div>
    <div class="main-container">
 etc.

CSS

body {
  background-image: url(images/sylvia-szekely-jv1hChnGHyE-unsplash.jpg);
  background-size: cover;
  color: rgb(11, 57, 84); 
  }
.fading-container {
  position: fixed;
  display: flex;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: auto;
  width: auto;
  background-color: rgb(0,0,0, 0.5);
}
#fading-img {
  margin: auto;
  width: 40%;
  height: 80%;
}

Js

$(".fading-container").click(function(){
  $(this).hide();
});

I might add an “X” as button on top of the pic that will trigger to close the “fading-container”.

thanks again for your reply and if you have any tips please don’t spare any! :slight_smile:

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.