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?

Navigation
1

What I want to do: A section on my website where you have a div with a title, an image and a text that represents something, for example a drums. And that when I click on this div to see all the information regarding this product / representation, it does not open another page, but rather expand this div showing everything inside. Or by pulling a page that represents it. Without closing what is behind, such as a facebook post. I know of the Z-index property, but I have no idea how to do this in js or some other technique that is easy to implement. Consideration: I'm not doing a database connection, or anything back end, only the front, the image and the texts are in the same tags, and by the time I want to do so to practice. I still do not know how to use css, ajax or json preprocessors.

    
asked by anonymous 21.07.2018 / 01:59

2 answers

1

Of course, since you're not using any back-end language, it's more complicated, but one way to do that is to open the popup with an iFrame by loading the product page ... Here's an example: / p> 

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><!--aquiessebotãoseriao"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>
    
23.07.2018 / 17:20
1

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

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

Here's 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 response

    
23.07.2018 / 18:35
How to resolve reference error in Visual Studio Community 2017? create a select within the while