How to add an image popup when accessing the site

Question

How to add an image popup when accessing the site

Navigation

#1 by (1 votes)

2

I would like to make a popup similar to the one from Kabum , but without a form, with only one image and the option of close.

I searched and found this code:

<a href="#" onclick="window.open('http://google.com', 'Pagina', 'STATUS=NO, TOOLBAR=NO, LOCATION=NO, DIRECTORIES=NO, RESISABLE=NO, SCROLLBARS=YES, TOP=10, LEFT=10, WIDTH=770, HEIGHT=400');">Clique para abrir a janela POP-up</a>

But it opens a new page and needs it to stay on the same site as the Kabum example.

javascript html popup

asked by anonymous 05.02.2016 / 17:17

1 answer

Load javascript function automatically into body tag How to remove duplicate rows from txt using php?

score 1 · Accepted Answer

I could not see the kabum popup, but from what I understood in your question you intend to do something like:

var close = document.getElementById('close');
var popup = document.getElementById('popup');

close.addEventListener("click", function() {
  popup.style.display = 'none';
});

#popup {
  position: absolute;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px 2px #000;
  padding-bottom: 5px;
}
#close {
  width: 100px;
  background-color: #cc0033;
  color: #ffffff;
  border: none;
  margin-left: 5px;
}

<div id="popup" class="popup">
  <img src="http://dummyimage.com/600x400/000/fff"alt="popup">
  <div>
    <button id="close">Sair</button>
  </div>
</div>

See working at jsfiddle