How to create a Pop UP that has the close button

Question

How to create a Pop UP that has the close button

Asked 7 years, 10 months ago

Viewed 3,718 times

0

Hi, everyone at Stackoverflow, first I’d like to apologize if you’re asking me wrong, this is the first time I’ve ever used the O.R. And also apologize for my ignorance in HTML and JS. In fact, I only know the basics. I have a problem, I searched several forums and could not solve.

I have a marketing site I would like to create a simple POP UP for the same, but I’m not getting it in any way. The Pop UP would look similar to this: http://i.imgur.com/Ksd4mvk.png The same should appear when the page is loaded on the right side of the page and should have the close button, not to disturb the visitor.

I hope with all my heart that someone can help me, because this is very important to me.

My eternal gratitude to all who can help.

2 answers

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.

by Mauro Alexandre • **1,353** points · Answer 1 · 2016-11-12T12:09:45+00:00

First we go to the html.

Create any page, index.html for example

<!DOCTYPE html>
<html lang="pt-br">
   <head>
      <title>PopUp - SO</title>
      <meta charset="UTF-8" />
   </head>
   <body>
      <div class="wrap">
        <div class="box"><span>x</span></div>
      </div>
      <h1>CONTÉUDO DA PÁGINA</h1>
   </body>
</html>

Your CSS should look like this

*{margin:0; padding:0;}

body{
  background:#F1F1F1;
}

.wrap{
  width:100%;
  height: 100%;
  position:fixed;
  background: rgba(0,0,0,0.5);
}

.wrap .box{
  width:400px;
  height:300px;
  background:#FFF;
  position: relative;
  left:calc(50% - 200px);
  padding-left:5px;
  padding-right:5px;
}

.wrap .box span{
  float:right;
  cursor:pointer;
}

Now where the magic happens.

document.getElementById("close").onclick = function(){
  document.querySelector(".wrap").style.display = "none";
}

I tried to summarize and leave as basic as possible, because there are already several tutorials on how to do this. Good luck XD

by BrTkCa • **11,094** points · Answer 2 · 2016-11-12T12:09:55+00:00

You will find a lot of stuff ready, especially with Jquery. A no-add plugin option is using only css, something like:

<div id="popup1" class="overlay">
    <div class="popup">
        <a class="close" href="#popup1">&times;</a>
        <div class="content">
            <img src="/caminho/da/imagem" alt="">
        </div>
    </div>
</div>

Then make use of the properties visibility, opacity and z-index to display on the other components.

Jsfiddle: https://jsfiddle.net/lbclucascosta/z8yyo2st/