Pop up window with HTML CSS JS

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!

Aside the fact that I hate popups and I think they are a very bad design practice, you can try this:

    const popup = document.createElement("div");
    popup.style.cssText = "add css to style the popup";
    document.body.appendChild(popup)

Ideally you’ll want to .appendChild() when something is triggered, like a button, a movement of the mouse, or worse a scroll. :slight_smile:

Does this help solve your problem?

Gran bel nome prima di tutto :slight_smile:

I actually sorted in the meantime this way:

<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’m quite happy with the result (I’m just doing random projects just to get more confident) I think I’ll just add the “X” to close the pop even if it’s working already this way.

I will also give a go to your code just to experiment something else, thanks a lot for your reply!!

1 Like

This type of overlay + dialog requires three elements.

  1. The overlay div.
  2. The absolutely positioned dialog that’s centered in the screen.
  3. Controls to close the dialog

You’ve gotten them working with jQuery. Try your hand at raw JS if you’d like. Here is simple tutorial on building a simple, modal, popup dialog.
https://www.w3schools.com/howto/howto_css_modals.asp

Click on the Try It Yourself button to see how it works.

2 Likes

Thanks Brian, I’ll give it a go!