* {
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) ').appendTo(label);
});
$(document).on('keyup','.formWA .wajib', function() {
if ($(this).val() != '') {
$(this).removeClass('focus');
$(this).parents('label').find('.validasi').removeClass('show');
}
});
$(document).on('change','.formWA select', function() {
$(this).removeClass('focus');
$(this).parents('label').find('.validasi').removeClass('show');
});
$(document).on('click','.formWA .submit', function(){
kirimWA($(this).parents('.poptamv').attr('id'));
return false;
});
function kirimWA(id) {
var validasi = true;
$('#'+id+' .wajib').each(function() {
if ($.trim($(this).val()) == '' || $.trim($(this).val()) == 'default') {
$(this).addClass('focus');
}
});
$('#'+id+' .wajib').each(function() {
if ($.trim($(this).val()) == '') {
validasi = false;
$(this).parents('label').find('.validasi').addClass('show');
$(this).focus();
return false;
} else if ($.trim($(this).val()) == 'default') {
validasi = false;
$(this).parents('label').find('.validasi').addClass('show');
return false;
}
});
if (validasi === true) {
var parameter = '';
var url_wa = 'https://web.whatsapp.com/send';
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
url_wa = 'whatsapp://send';
}
if (id == 'whatsapp') {
var kode_area = 62;
var nomor = $('#'+id+' .nomor').val();
if(nomor != null) {
nomor_whatsapp = nomor;
}
nama_admin = 'Admin',
pesan_salam = 'Halo';
var judul = $('#'+id+' .title-content').text(),
nama = $('#'+id+' .nama').val(),
nowa = $('#'+id+' .nowa').val(),
jumlah = $('#'+id+' .jumlah').val(),
pembayaran = $('#'+id+' .pembayaran').val(),
alamat = $('#'+id+' .alamat').val();
var parameter = url_wa + '?phone=' + kode_area + nomor_whatsapp + '&text=' +
pesan_salam + ' ' + nama_admin + '.. ' +
'saya *' + nama + '*, ingin *' + judul + '.*%0A%0A' +
'Ini data pesanan:%0A%0A' +
'No. WhatsApp : ' + nowa + '%0A' +
'Jumlah Order : ' + jumlah + '%0A' +
'Pembayaran : ' + pembayaran + '%0A' +
'Alamat : ' + alamat + '%0A%0A';
} else {
alert('id tidak ditemukan');
}
// alert(parameter);
$(this).attr('href', parameter);
var w = 960,
h = 540,
left = Number((screen.width / 2) - (w / 2)),
tops = Number((screen.height / 2) - (h / 2)),
popupWindow = window.open(this.href, '', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width=' + w + ', height=' + h + ', top=' + tops + ', left=' + left);
popupWindow.focus();
return false;
}
}