A to qr gen

by Craig Martin

HTML

<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs/qrcode.min.js"></script>










<div id="adpy">


<div id="getnext_rez">

<a href="https://www.google.com">google</a>

<a href="https://www.kingdomadvertising.net">kaam</a>
<a href="#" onclick="alert('this is a function and not a link to be converted.')">No QR link</a>


<input style="display:none;" class="modal-state" id="modal-1" type="checkbox" />
<div class="modal">
  <label class="modal__bg" for="modal-1"></label>
  <div class="modal__inner">
    <label class="modal__close" for="modal-1"></label>
    <div id="modbox"></div>
  </div>
</div>


</div>

</div>

CSS

.qrlnk {
  display:none;
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .6);
  background: #00000060;
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 90%;
  margin: auto;
  overflow: auto;
  
  }
  
 .modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #000000;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #ccc;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}
  
#modbox img {
    max-width: 200px;
}

#modbox {
    text-align: center;
    max-width: 300px;
    text-align: center;
    font-size: 1.2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

#modbox h4{
margin-left:auto;
margin-right:auto;
color:#ffffff;
text-shadow: 0 2px 3px black;
}

JavaScript

jQuery('#adpy a').each(function(){
	if(jQuery(this).attr("href") && jQuery(this).attr("href").includes("http")){
  jQuery(this).addClass("qrlnkcls");
	}
});



jQuery(".qrlnkcls").on("click", function(e){
e.preventDefault();

jQuery("#modbox").html("");

nqrurl=jQuery(this).attr("href");

nqrtitle=jQuery(this).text();
winhgt=window.innerHeight;
winhwdth=window.innerWidth;

maxqrsize=(winhwdth/100)*50;

padsize = ((winhwdth-maxqrsize)/2);

mpadsize = (jQuery("#modbox").css("width")/100)*23;

modsz = document.querySelector("#modbox").clientWidth;
modsz = (modsz/100)*23;

jQuery("#modbox").css("margin-left",modsz);


const qrcode = new QRCode(document.getElementById("modbox"), {
  text: nqrurl,
  width: maxqrsize,
  height: maxqrsize,
  colorDark : '#000',
  colorLight : '#fff',
  correctLevel : QRCode.CorrectLevel.H
});

jQuery("#modbox").prepend("<h4 style='margin-left:-"+modsz+"px'>"+nqrtitle+"</h4>");
jQuery(".modal-state").prop("checked",true);

});