How do I open a pop-up at the push of a button?

Question

How do I open a pop-up at the push of a button?

Navigation

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

-1

I want to put a pop-up window by pressing the freight button, where a page opens that person places the zip code and the product's freight is calculated, how do you do that? If anyone can help me in this freight also thank.

php popup

asked by anonymous 07.11.2015 / 19:29

2 answers

Is it possible to keep an object in a session variable? What can I do to load page without breaking code? [closed]

score 0 · Answer 1

0

I recommend using the colorbox library

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

07.11.2015 / 20:10

score 0 · Answer 2

Ta, JSS, CSS and HTML. to get an HTML for the freight calculation use the site link

$(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>