* {
margin: 0;
padding: 0;
outline: none !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
word-wrap: break-word;
-webkit-font-smoothing: subpixel-antialiased;
}
.clear:after {
content: '';
display: block;
clear: both;
}
.grid-wa {
display: grid;
grid-gap: 20px;
}
.grid-wa.col2 {
grid-template-columns: 1fr 1fr;
}
.grid-wa.col3 {
grid-template-columns: 1fr 1fr 1fr;
}
.grid-wa.col4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-wa.install-btn {
grid-template-columns: 2fr 1fr;
}
@media(max-width: 960px) {
.grid-wa {
grid-template-columns: 1fr!important;
}
}
.poptamv {
font-size: 14px;
line-height: 1.6;
}
.poptamv * {
font-family: 'Open Sans', sans-serif;
}
.poptamv b,
.poptamv strong {
font-weight: 600;
}
.poptamv {
display: flex !important;
position: relative;
position: fixed !important;
z-index: 1000000;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
padding: 20px 0;
visibility: hidden;
opacity: 0;
}
.poptamv.open {
visibility: visible;
opacity: 1;
transition: .4s;
}
.poptamv a {
text-decoration: none;
}
.poptamv .wrap {
display: block;
margin: auto auto;
width: calc(100% - 30px);
box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
max-width: 500px;
}
.poptamv .wrap .title {
display: block;
margin: 0;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #eee;
font-size: 14px;
background: #fff;
border-radius: 4px 4px 0 0;
font-weight: 400;
}
.poptamv .wrap .title span.title-content {
padding: 0 20px;
color: #444;
font-size: 110%;
}
.poptamv .wrap .title span.title-content i {
color: #0CC243;
font-size: 140%;
display: inline-block;
vertical-align: middle;
margin-right: 10px;
}
.poptamv .wrap .title .closeTamv {
color: #aaa;
float: right;
padding: 0 20px;
cursor: pointer;
font-size: 25px;
font-weight: normal;
transition: .2s;
}
.poptamv .wrap .title .closeTamv:hover {
color: #444;
}
.poptamv .wrap .title .closeTamv:before {
content: '';
cursor: default;
display: block;
position: fixed;
z-index: -2;
top: 0;
left: 0;
width: 100%;
height: calc(100% + 100px);
background: rgba(0, 0, 0, .4);
}
.poptamv .wrap .content {
display: block;
/*overflow-y: auto;*/
/*max-height: calc(100vh - 80px);*/
background: #fff;
border-radius: 0 0 4px 4px;
}
.poptamv .poptamv-wrap {
padding: 20px;
}
/* ----------------
FORMTAMV
------------------- */
@media(max-width: 960px) {
.formtamv .grid-wa.col2 {
grid-template-columns: 1fr 1fr!important;
}
}
@media(max-width: 320px) {
.formtamv .grid-wa.col2 {
grid-template-columns: 1fr!important;
}
}
.formtamv * {
outline: none;
text-decoration: none;
}
.formtamv br {
margin: 0;
padding: 0;
line-height: 0;
}
.formtamv .focus {
box-shadow: inset 0 0 0 1px #FFBA00;
}
.formtamv label {
position: relative;
display: block;
width: 100%;
margin:0;
padding: 0;
}
.formtamv label > input,
.formtamv label > select,
.formtamv label > textarea {
position: relative;
z-index: 1;
border: none;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02), inset 1px 1px 5px rgba(0,0,0,.05);
background: rgba(0, 0, 0, .02);
padding: 10px 15px;
width: 100%;
border-radius: 4px;
padding-left: 40px;
}
.formtamv label > i {
position: absolute;
z-index: 0;
display: inline-block;
vertical-align: top;
width: 40px;
text-align: center;
font-size: 20px;
height: auto;
background: transparent;
box-shadow: none;
top: 3px;
left: 0;
color: rgba(0,0,0,.2);
}
.formtamv label small {
position: relative;
display: block;
margin-top: 10px;
z-index: 3;
}
.formtamv label small > a.tooltip {
margin-left: 10px;
font-size: 20px;
vertical-align: middle;
display: inline-block;
color: rgba(0,0,0,.4);
}
.formtamv label small > a.tooltip:hover {
color: rgba(0,0,0,.6);
}
.formtamv label small a {
font-weight: bold;
}
.formtamv select::-ms-expand {
display: none;
}
.formtamv select {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.formtamv select option {
font-size: 18px;
background: #EDF8F5;
color: rgba(0,0,0,0.7);
text-shadow: none;
}
.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button,
.formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.nomor_whatsapp[type="number"] {
-moz-appearance: textfield;
}
.formtamv label>*:focus {
background: transparent;
}
.formtamv label textarea {
min-height: 40px;
resize: vertical;
margin-bottom: 0;
}
.formtamv label .validasi {
position: relative;
position: absolute !important;
z-index: 2;
top: calc(100% + 10px);
left: 0;
background: #FFBA00;
color: rgba(0, 0, 0, .6);
padding: 5px 10px;
border-radius: 3px;
font-size: 80%;
box-shadow: 0 5px 10px rgba(0,0,0,.1);
transition: .4s;
visibility: hidden;
opacity: 0;
display: inline-block !important;
}
.formtamv label .validasi.show {
visibility: visible;
opacity: 1;
top: 100%;
}
.formtamv label .validasi:after {
position: absolute;
bottom: 100%;
left: 12px;
content: "";
border: 8px solid;
border-color: transparent transparent #FFBA00 transparent;
}
.formtamv .submit {
display: block;
text-align: center;
border: none;
width: 100%;
display: block;
background: #0CC243;
color: #fff;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
font-weight: 600;
font-size: 110%;
}
.formtamv .submit.s2 {
background: #009688;
}
.formtamv .submit i {
display: inline-block;
vertical-align: middle;
font-size: 140%;
margin: 0 10px;
}
.formtamv .submit:active {
box-shadow: none;
}
.waFix {
font-family: "Open Sans", sans-serif;
position: relative;
position: fixed!important;
z-index: +100;
bottom: 20px;
}
.waFix.kiri {
left: 20px;
}
.waFix.kanan {
right: 20px;
}
.waFix i.wa {
position: relative;
display: block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
background: #fff;
color: #23CC62;
border-radius: 60px;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
font-size: 30px;
}
.waFix:active i.wa {
box-shadow: none;
}
.waFix span.count {
position: absolute;
display: inline-block;
top: -2px;
right: -2px;
background: #E91B43;
color: #fff;
height: 20px;
line-height: 20px;
width: 20px;
border-radius: 20px;
font-size: 8px;
text-align: center;
font-style: normal;
font-weight: bold;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
transform: scale(0.0);
}
.waFix.show span.count {
transform: scale(1.1);
transition: .2s;
}
.waFix span.info {
display: inline-block;
white-space: nowrap;
border-radius: 4px;
background: #fff;
height: 40px;
line-height: 40px;
padding: 0 15px;
text-align: center;
position: relative;
position: absolute!important;
box-shadow: 0 5px 15px rgba(0,0,0,.1);
bottom: 8px;
color: rgba(0,0,0,.6);
opacity: 0;
visibility: hidden;
}
@media(max-width: 480px) {
.waFix span.info {
display: none;
}
}
.waFix.show span.info {
opacity: 1;
visibility: visible;
transition: 1s;
}
.waFix.kiri span.info {
left: calc(100% + 45px);
}
.waFix.kiri.show span.info {
left: calc(100% + 15px);
}
.waFix.kanan span.info {
right: calc(100% + 45px);
}
.waFix.kanan.show span.info {
right: calc(100% + 15px);
}
.waFix span.info:after {
position: absolute;
top: calc(50% - 8px);
content: "";
border: 8px solid;
}
.waFix.kiri span.info:after {
right: 100%;
border-color: transparent #fff transparent transparent ;
}
.waFix.kanan span.info:after {
left: 100%;
border-color: transparent transparent transparent #fff ;
}
.waFix span.info i {
display: inline-block;
font-size: 140%;
margin-right: 5px;
vertical-align: middle;
color: #4FC3F7;
}
<a href="#whatsapp" class="poptamv-btn btn block" data-nomor="087864904554" data-title="
Order
Landing Page Elementor ">
Order Sekarang
$('.poptamv-btn, .tombol-wa').on('click', function() {
var title = $(this).attr('data-title');
var nomorWA = $(this).attr('data-nomor');
var target = $(this).attr('href');
$(target).addClass('open');
$(target).find('.title-content').html(title);
$(target).find('input.nomor').val(nomorWA);
if($(this).attr('data-img') != null) {
var img = $(this).attr('data-img');
$(target).find('.content img').show();
$(target).find('.content img').attr('src',img);
}
if($(this).attr('data-width') != null) {
var width = $(this).attr('data-width');
$(target).find('.wrap').attr('style','max-width:'+width+'px!important;')
}
if($(this).attr('data-tooltip') != null) {
var tooltip = $(this).attr('data-tooltip');
$(target).find('.poptamv-wrap').show();
$(target).find('.poptamv-wrap').html(tooltip)
}
});
$('.poptamv .closeTamv').on('click', function() {
$(this).parents('.poptamv').removeClass('open');
});
var web_title = $('title').text();
$(document).on('click','.waFix', function(){
$(this).removeClass('show');
$('title').text(web_title);
});
$(document).on('keypress','.formWA input, .formWA textarea', function() {
if (event.keyCode === 13) {
$(this).parents(".formWA").find('.submit').trigger('click');
}
});
$('.formWA .wajib').each(function() {
title = $(this).attr('placeholder');
label = $(this).parents('label');
$('' + title + ' (wajib diisi)
