How to create a Pop UP that has the close button [duplicate]

Question

How to create a Pop UP that has the close button [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello everyone at StackOverflow, first of all I wanted to apologize if you are asking the wrong way, it is the first time I use the OS. And apologize also for my ignorance in HTML and JS. In fact, I only know the basics. I have a problem, I have researched in several forums and I could not solve it.

I have a marketing website I would like to create a simple POP UP for the same, however I am not getting any way. The Pop UP would look something like this: link The same should appear when the page is loaded on the right side of the page and should have the close button, so as not to disturb the visitor.

I sincerely hope that someone can help me, as this is very important to me.

My eternal gratitude to anyone who can help.

javascript html jquery css

asked by anonymous 12.11.2016 / 08:16

2 answers

Error creating database by Visual Studio 2015 Program received signal sigsegv segmentation fault

score 0 · Answer 1

First we go to 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 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

score 0 · Answer 2

You will find a lot ready, especially with JQuery. An option with no additional plugin 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 : link