How do I make it open a Pop-up by pressing a button?

Question

I want to put a pop-up window when pressing the freight button, where it opens a page that the person puts the zip code and is calculated the freight of the product, how do you do this? If anyone can help me with the freight I’d also appreciate.

Answer 1

I recommend using the library colorbox

The link shows how to use the library and also has some demos.

Answer 2

Ta ai, JSS, CSS and HTML. to get an HTML for the freight calculation use the site http://www.trackside/

$(function() {
    $("#btnFrete").click(function() {
        $("#registerDiv").fadeIn(1000);
        $("body").append("<div id='mask'></div>");
        $("#mask").fadeIn(1000);
        $("#popup").fadeIn(1000);
    });

});

.input{
  border:1px solid #333;
}
.required{
  color:red;
  font-size:12px;
}

#registerDiv{
  display:none;
  margin-top:0px;
  margin-left:0px;
  border:2px solid #333;
  padding:3px;
  background:#cdcdcd;
  width:280px;
  text-align:center;
}
#popup{
  display:none;
  padding:10px;
  background:#969696;
  position:absolute;
  top:25%;
  left:25%;
  z-index: 99999;
  opacity:100%;
  
}
#popupinfo{
  padding:2px;
  text-align:center;
  background:#cfcfcf;
}
#popupinfo p{
  font-size:14px;
}

#popupinfo .button {
  text-align:center;
}
#popupinfo .button a{
  text-decoration:none;
  border:1px solid #333;
  width:20px;
  padding:5px;
  background:#1A1A1A;
  color:#eee;
}

#popupinfo .button a:hover{
  background:#eee;
  color:#1a1a1a;
}

#mask{
  
  background: #000;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  z-index: 999;
  
}

<input type="button" id="btnFrete" value="Calcular frete" />
<div id="popup">
  <div id="popupinfo">
    <div id="registerDiv">
      <p class="required">
        Coloque o HTML do calculo de frete aqui
      </p>

    </div>
  </div>
</div>