How can I create an event where I click on a div that contains details of a product and after that this product opens on the same page?

Question

What I want to do: a section on my site where you have a div with title, an image and a text q represents something, for example a drum (musical instrument). And that when I click on this div to view all the information related to this product/representation, it does not open another page, but rather expands this div showing everything inside. Or by pulling a page that represents that. Without closing what is behind, as for example a facebook post. I know the Z-index property, but I have no idea how to do it in js or some other technique that is easy to implement. Consideration: I am not connecting to database, or anything back end, only the front, image and text are in the same tags, and for now I want to do so to practice. I still don’t know how to use css, ajax or json preprocessors.

Answer 1

Right, since you are not using any back-end language it gets more complicated, however, one way to do this is to open the pop-up with an iframe, loading the product page... Follow an example:

function pop(e){
  //deixa o fundo visivel e escreve nele o iframe pra aparecer a pagina do produto
  $("#fundo").css("display","block");
  $("#fundo").html("<iframe class='frame' src="+ $(e).attr("data-link") +"></iframe>");
}

body{
  margin: 0;
  font-family: "arial";
}

#fundo{
  background-color: rgba(0,0,0,0.4);
  position: fixed; 
  top: 0;left: 0; right: 0; bottom: 0;
  display: none;
  transition: all 1s;
}

.frame{
  width: 70%;
  height: 70%;
  position:  absolute;
  top: calc(50% - 35%);
  left: calc(50% - 35%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- aqui esse botão seria o "anuncio" do seu item, então vc colocar esse stributo "data-link" que é o caminho pra pagina que você criou exclusiva (algo desse tipo) -->


<button onclick="pop(this);" data-link="https://http2.mlstatic.com/D_Q_NP_748857-MLB26626153009_012018-Q.jpg">Violão</button>
<button onclick="pop(this);" data-link="https://img.freepik.com/free-vector/guitars-collection_23-2147523311.jpg?size=338&ext=jpg">Guitarra</button>
<button onclick="pop(this);" data-link="https://cdn.pixabay.com/photo/2012/04/13/00/39/drums-31359_960_720.png">Bateria</button>

<!-- Esse aqui é o fundo preto, para fechar o popup é só clicar nele -->
<div id="fundo" onclick="$('#fundo').css('display','none');"></div>

Answer 2

Follow a basic example made only CSS. It use the event :target CSS. Notice the URL of the page that you will better understand how the technique works.

When you click on link of the "modal" it makes the target on the div you want to show and plot it on the page. When you click on "close" it changes the target and the modal closes. (note changes in page URL)

Follow the practical example.

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }

    .modalDialog {
      position: fixed;
      font-family: Arial, Helvetica, sans-serif;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      z-index: 99999;
      opacity: 0;
      -webkit-transition: opacity 400ms ease-in;
      -moz-transition: opacity 400ms ease-in;
      transition: opacity 400ms ease-in;
      pointer-events: none;
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    .modalDialog:target {
      opacity: 1;
      pointer-events: auto;
    }

    .modalDialog>div {
      width: 400px;
      position: relative;
      margin: 10% auto;
      padding: 5px 20px 13px 20px;
      border-radius: 10px;
      background: #fff;
      background: -moz-linear-gradient(#fff, #999);
      background: -webkit-linear-gradient(#fff, #999);
      background: -o-linear-gradient(#fff, #999);
    }

    .close {
      background: #606061;
      color: #FFFFFF;
      line-height: 25px;
      position: absolute;
      right: -12px;
      text-align: center;
      top: -10px;
      width: 24px;
      text-decoration: none;
      font-weight: bold;
      -webkit-border-radius: 12px;
      -moz-border-radius: 12px;
      border-radius: 12px;
      -moz-box-shadow: 1px 1px 3px #000;
      -webkit-box-shadow: 1px 1px 3px #000;
      box-shadow: 1px 1px 3px #000;
    }
    .close:hover {
      background: #00d9ff;
    }

  <a href="#openModal1">Box 1</a>
  <div id="openModal1" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Modal Box 1</h2>
      <p>This is a sample modal box that can be created using the powers of CSS3. </p>
      <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register
        form for users.</p>
    </div>
  </div>

  <a href="#openModal2">Box 2</a>
  <div id="openModal2" class="modalDialog">
    <div>
      <a href="#close" title="Close" class="close">X</a>
      <h2>Modal Box 2</h2>
      <img src="http://unsplash.it/100/100" alt="" style="margin: 0 auto; display: block;">
    </div>
  </div>

Source: Example based on this answer