Mailto & Tel
31 января 2023
Cсылку mailto браузер открывает в почтовой программе, прописанной в браузере по умолчанию. Ее можно изменить, но обычно никто этого не делает.
Часто люди используют почту на доменах mail.ru, yandex.ru, gmail.com
Чтобы дать удобный выбор web интерфейса почты, пишем небольшой javascript плагин
Поскольку ссылку можно оформить таким образом, что почтовый адрес не будет написан явно, это позволит несколько снизить риск попадания адреса в спамерские базы.
<a href="#" class="vahro-mailto" data-name="vahro" data-domain="yandex" data-zone="ru">Как работает
Mailto
В файлах WordPress
В functions.php загружаем js и css
wp_enqueue_script( 'vahro-mailto', get_template_directory_uri() . '/js/vahro-mailto.js', null, null, true );
wp_enqueue_style( 'vahro-mailto', get_template_directory_uri().'/css/vahro-mailto.css' );
в header.php/footer.php
<div>
<a href="#" class="vahro-mailto" data-name="vahro" data-domain="yandex" data-zone="ru">
<img src="<?php echo get_template_directory_uri().'/svg/mail.svg' ?>" alt="напишите нам на E-mail" title="напишите нам на E-mail" loading="lazy">
</a>
</div>JavaScript для Mailto
//
// vahro-mailto.js
// https://vahro.ru
//
window.onload = function() {
const body = document.querySelector( 'body');
const items_vahro_mailto = document.querySelectorAll( '.vahro-mailto');
const vahro_logo_svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1079.65 407.24">
<defs><style>.d{fill:none;stroke:#c0936e;stroke-width:10px}</style></defs>
<g id="b"><g id="c">
<rect width="1038.26" height="365" x="36.38" y="37.24" class="d" rx="15" ry="15"/>
<path d="m249.52 139.76-63.43 164.5h-59.77l-62.98-164.5h55.68l38.18 113.23 37.69-113.23h54.63ZM378.43 286.83c-2.83 2.15-6.35 4.74-10.55 7.76-4.2 3.03-8.16 5.42-11.87 7.18a75 75 0 0 1-16.11 5.2c-5.57 1.12-11.67 1.68-18.31 1.68-15.63 0-28.71-4.83-39.26-14.5s-15.82-22.02-15.82-37.06c0-12.01 2.68-21.83 8.06-29.44 5.37-7.62 12.99-13.62 22.85-18.02 9.76-4.39 21.87-7.52 36.33-9.38 14.45-1.85 29.44-3.22 44.97-4.1v-.88c0-9.08-3.71-15.36-11.13-18.82-7.42-3.47-18.36-5.2-32.81-5.2-8.69 0-17.97 1.54-27.83 4.61-9.87 3.08-16.94 5.45-21.24 7.1h-4.83v-39.7c5.57-1.46 14.62-3.2 27.17-5.2 12.55-2 25.12-3 37.72-3 29.98 0 51.64 4.61 64.97 13.84s20 23.71 20 43.43v111.91h-52.29v-17.43Zm0-25.6v-34.17c-7.13.59-14.85 1.39-23.14 2.41-8.3 1.02-14.6 2.21-18.9 3.58-5.27 1.66-9.3 4.07-12.08 7.23s-4.17 7.32-4.17 12.48c0 3.41.29 6.18.88 8.32.59 2.14 2.05 4.19 4.39 6.13 2.25 1.95 4.93 3.38 8.06 4.31 3.12.92 8.01 1.39 14.65 1.39 5.27 0 10.62-1.07 16.04-3.21 5.42-2.14 10.18-4.96 14.28-8.47ZM644.44 304.26h-52.88v-81.59c0-6.64-.34-13.26-1.03-19.85-.68-6.59-1.86-11.45-3.52-14.58-1.96-3.61-4.81-6.25-8.57-7.91-3.76-1.66-9.01-2.49-15.75-2.49-4.79 0-9.65.78-14.58 2.34-4.93 1.56-10.28 4.05-16.04 7.47v116.6h-52.88V76.33h52.88v81.59c9.36-7.32 18.36-12.94 26.99-16.85 8.63-3.9 18.21-5.86 28.75-5.86 17.75 0 31.62 5.18 41.62 15.53 10 10.35 15 25.83 15 46.44v107.08ZM812.17 190h-4.68c-2.24-.78-5.85-1.37-10.82-1.76-4.97-.39-9.11-.59-12.42-.59-7.5 0-14.13.49-19.88 1.46-5.75.98-11.94 2.64-18.56 4.98v110.16h-52.88V139.76h52.88v24.17c11.59-9.96 21.68-16.58 30.25-19.85 8.57-3.27 16.47-4.91 23.68-4.91 1.85 0 3.95.05 6.29.15 2.34.1 4.39.25 6.14.44V190ZM1010.21 222.08c0 27.05-7.89 48.37-23.66 63.94-15.77 15.58-37.92 23.36-66.43 23.36s-50.66-7.79-66.43-23.36c-15.77-15.58-23.66-36.89-23.66-63.94s7.93-48.63 23.8-64.16c15.87-15.53 37.96-23.29 66.28-23.29s50.9 7.81 66.58 23.44c15.67 15.63 23.51 36.96 23.51 64.01Zm-64.89 39.99c3.42-4.2 5.98-9.25 7.69-15.16s2.56-14.09 2.56-24.54c0-9.67-.88-17.77-2.64-24.32-1.76-6.54-4.2-11.77-7.32-15.67-3.13-4-6.88-6.83-11.28-8.5-4.39-1.66-9.13-2.49-14.21-2.49s-9.59.68-13.55 2.05c-3.96 1.37-7.74 4.1-11.35 8.2-3.22 3.81-5.79 9.03-7.69 15.67-1.9 6.64-2.86 14.99-2.86 25.05 0 8.99.83 16.77 2.49 23.36 1.66 6.59 4.1 11.89 7.32 15.89 3.12 3.81 6.86 6.59 11.21 8.35 4.34 1.76 9.3 2.64 14.87 2.64 4.78 0 9.35-.81 13.7-2.42 4.34-1.61 8.03-4.32 11.06-8.13Z" class="d"/><rect width="1038.26" height="365" x="5" y="5" class="d" rx="15" ry="15"/>
</g></g></svg>
`;
// ---------------------------------------------------------------------------------------------------------------------------
//
// Почта
//
// ---------------------------------------------------------------------------------------------------------------------------
for (const vahro_mailto of items_vahro_mailto) {
vahro_mailto.addEventListener( 'click', ( evt ) => {
evt.preventDefault(); // не переходим по ссылке
let data_mail = '';
if( evt.currentTarget.getAttribute("data-zone") && evt.currentTarget.getAttribute("data-domain") && evt.currentTarget.getAttribute("data-name")) {
data_mail = evt.currentTarget.getAttribute("data-name") + '@' +
evt.currentTarget.getAttribute("data-domain") + '.' +
evt.currentTarget.getAttribute("data-zone");
// alert( data_mail );
}
if ( data_mail === '' && evt.currentTarget.getAttribute("data-all") ) {
data_mail = evt.currentTarget.getAttribute("data-all");
}
if ( data_mail === '' ) {
// не заполнен адрес почты
console.log('не заполнен адрес почты');
// alert('vahro_mailto - click');
return;
}
let mailto = data_mail;
// обертка модального окна - div.orata-modal-wrapper
// занимает всю площадь экана, при клике в любое место кроме модального окна убирается - remove()
let vahroModalWrapper = document.createElement('div');
vahroModalWrapper.classList.add('vahro-modal-wrapper');
// Авиа-конверт
let vahroModalEnvelope = document.createElement('div');
// vahroModalEnvelope.classList.add('orata-modal-envelope');
vahroModalEnvelope.classList.add('avia-envelope-wrapper');
vahroModalWrapper.appendChild( vahroModalEnvelope );
//
// Формируется основное окно - vahroModal
//
let vahroModal = document.createElement('div');
vahroModal.classList.add('vahro-modal');
// Адрес почты - mailto
let spanMail = document.createElement('span');
spanMail.classList.add('mail');
spanMail.appendChild( document.createTextNode( mailto ) );
vahroModal.appendChild( spanMail );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
// Ссылка - копировать в буфер
let aCopyText = document.createElement('a');
aCopyText.setAttribute( "href", "#" );
aCopyText.appendChild( document.createTextNode( 'копировать адрес' ) );
aCopyText.addEventListener( 'click', (e) => {
e.preventDefault(); // не переходим по ссылке
navigator.clipboard.writeText( posta ); // копируем в буфер адрес почты
e.target.innerText ="адрес скопирован";
// vahroModalWrapper.remove(); // убираем модальное окно
} );
vahroModal.appendChild( aCopyText );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
let sendText = document.createElement('span');
sendText.classList.add('text');
sendText.appendChild( document.createTextNode( 'отправить письмо через' ) );
vahroModal.appendChild( sendText );
// • Яндекс: https://mail.yandex.ru/compose?mailto=%s
// "https://mail.yandex.ru/compose?mailto=%s","Яндекс.Почта"
let aYandexRu = document.createElement('a');
aYandexRu.appendChild( document.createTextNode( "Яндекс.Почта" ) );
aYandexRu.setAttribute( "target","_blank" );
aYandexRu.setAttribute( "href", "https://mail.yandex.ru/compose?mailto=" + mailto );
vahroModal.appendChild( aYandexRu );
// https://e.mail.ru/cgi-bin/sentmsg?mailto=%s
// https://e.mail.ru/compose/?to=%s
let aMailRu = document.createElement('a');
aMailRu.setAttribute( "target","_blank" );
aMailRu.setAttribute( "href", "https://e.mail.ru/compose/?to=" + mailto );
aMailRu.appendChild( document.createTextNode( "Mail.ru" ) );
vahroModal.appendChild( aMailRu );
// • Google: https://mail.google.com/mail/?extsrc=mailto&url=%s
// "https://mail.google.com/mail/?extsrc=mailto&url=%s","Gmail"
let aGoogleCom = document.createElement('a');
aGoogleCom.setAttribute( "target","_blank" );
aGoogleCom.setAttribute( "href", "https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=" + mailto );
aGoogleCom.appendChild( document.createTextNode( "Gmail.com" ) );
vahroModal.appendChild( aGoogleCom );
// Почтовый клиент по умолчанию
let aMailDefault = document.createElement('a');
aMailDefault.setAttribute( "href", "mailto:" + mailto );
aMailDefault.appendChild( document.createTextNode( "По умолчанию" ) );
vahroModal.appendChild( aMailDefault );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
// Create link <a> "Close" modal - закрыть окно
let vahroModalClose = document.createElement( 'a' );
vahroModalClose.setAttribute( "href", "#" );
closeTxt = document.createTextNode( "Закрыть окно" );
vahroModalClose.appendChild( closeTxt );
vahroModalClose.addEventListener( 'click', (e) => {
e.preventDefault(); // не переходим по ссылке
vahroModalWrapper.remove(); // убираем модальное окно
} );
vahroModal.appendChild( vahroModalClose );
// Логотип vahro.ru
let aVahroLogo = document.createElement('a');
aVahroLogo.classList.add('vahro-modal-logo');
aVahroLogo.setAttribute( "href", "https://vahro.ru/" );
aVahroLogo.innerHTML = '<div>' + vahro_logo_svg + '</div>';
vahroModal.appendChild( aVahroLogo );
vahroModalEnvelope.appendChild( vahroModal );
// убираем vahroModalWrapper при клике в любое место кроме модального окна - vahroModalWrapper.remove()
vahroModalWrapper.addEventListener( 'click', (e) => {
const withinBoundaries = e.composedPath().includes( vahroModalEnvelope );
if ( ! withinBoundaries ) {
vahroModalWrapper.remove();
}
});
body.appendChild( vahroModalWrapper );
aMailDefault.dispatchEvent( mouseoverEvent );
}); // orata_posta.addEventListener()
}
} // window.onload = function()CSS
:root {
--basic-color-background: #f5e6c7;
--basic-color-text-dack: #333333;
--basic-color-text: #C0936E;
--basic-color-text-light: #666666;
}
hr {
height: 0;
border: 0;
border-top: 2px solid var(--basic-color-text);
}
.vahro-modal {
/* display: block; */
height: -moz-fit-content;
height: fit-content;
padding: 15px 10px 10px;
background-color: var(--basic-color-background);
text-align: center;
}
.vahro-modal-corners {
border: 4px double var(--basic-color-text);
border-radius: 30px;
}
.vahro-modal-center {
margin: auto;
}
.vahro-modal span.mail {
display: block;
font-size: larger;
font-weight: bolder;
color: var(--basic-color-text);
}
.vahro-modal span.text {
display: block;
font-size: smaller;
color: var(--basic-color-text-light);
}
.vahro-modal a {
color: #333333;
display: block;
box-sizing: border-box;
margin-top: 10px;
padding: 5px;
text-decoration: none;
border: 1px solid var(--basic-color-background);
}
.vahro-modal a:hover {
border: 1px solid var(--basic-color-text);
border-radius: 10px;
}
.vahro-modal a.vahro-modal-logo:hover,
.vahro-modal a.vahro-modal-logo {
border: none;
padding: 0;
}
.vahro-modal-logo svg {
height: 40px;
width: auto;
}
.vahro-modal-wrapper:before {
/* content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.05em; */
}
.avia-envelope-wrapper {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkN2NmYTY3My1mYjQ3LWQyNGEtYWI5OC1mMmJjN2IzMjQ2NzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Mjk0NUIwQjhCNUFGMTFFREJEMDNGMzIzQTEyNzM0OTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Mjk0NUIwQjdCNUFGMTFFREJEMDNGMzIzQTEyNzM0OTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTYxZTk3MzgtZDJhZS0zMjQ4LWI2OTAtNTM3NzM1ZTQxZjNhIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ3Y2ZhNjczLWZiNDctZDI0YS1hYjk4LWYyYmM3YjMyNDY3OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuWHWgsAAAAbUExURQCFlQB/kgBui//+/f/8+f+hhf9cVQBsiv///7pu9DoAAAAJdFJOU///////////AFNPeBIAAADMSURBVHjapNZJEsMgDETRnwHM/U8csI0tkk3UrS31ikldwPZdzxar1KXKMohjcebFWTPOfnHOCuecce4I535xegOnr3B6EqefcbKAkyOcDOLkFyf7GHbFOftoGDbitA04b28s2AsrdmLJnlizBxbtjlU7sGw71m3DsG902wqGrRh2wVkbcdoGnLc3FuyFFTuxZE+s2QOLdseqHVi2Heu2YtiKYQuGfWHY+NClbcB5e2PBXlixE0v2xJo9sGh3rNqBZdvx79/sX9s+AgwAlDVhKvLpMwEAAAAASUVORK5CYII=), var(--basic-color-background);
padding: 10px;
margin: auto;
}
.vahro-modal-wrapper {
display: flex;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.75);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
z-index: 1;
padding: 20px;
box-sizing: border-box;
}Tel
По ссылке tel браузер предлагает набрать телефон на мобильном устройстве.
Добавим чаты whatsup, viber, telegram
В файлах WordPress
В functions.php загружаем js и css, точно так же как для mailto
в header.php/footer.php
<div>
<a href="#" class="vahro-tel" data-number="7920522" data-region="495" data-zone="7" data-country="RU">
<img class="" src="<?php echo get_template_directory_uri().'/svg/phone.svg' ?>" alt="позвоните нам" title="позвоните нам" loading="lazy">
</a>
</div>
<div>
<a href="#" class="vahro-whatsapp" data-number="7920522" data-region="903" data-zone="7" data-country="RU">
<img class="" src="<?php echo get_template_directory_uri().'/svg/whatsapp.svg' ?>" alt="напишите нам в WhatsApp" title="напишите нам в WhatsApp" loading="lazy">
</a>
</div>JavaScript для Tel
//
// vahro-mailto.js
// https://vahro.ru
//
window.onload = function() {
const body = document.querySelector( 'body');
const items_vahro_tel = document.querySelectorAll( '.vahro-tel');
const items_vahro_whatsapp = document.querySelectorAll( '.vahro-whatsapp');
const vahro_logo_svg = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1079.65 407.24">
<defs><style>.d{fill:none;stroke:#c0936e;stroke-width:10px}</style></defs>
<g id="b"><g id="c">
<rect width="1038.26" height="365" x="36.38" y="37.24" class="d" rx="15" ry="15"/>
<path d="m249.52 139.76-63.43 164.5h-59.77l-62.98-164.5h55.68l38.18 113.23 37.69-113.23h54.63ZM378.43 286.83c-2.83 2.15-6.35 4.74-10.55 7.76-4.2 3.03-8.16 5.42-11.87 7.18a75 75 0 0 1-16.11 5.2c-5.57 1.12-11.67 1.68-18.31 1.68-15.63 0-28.71-4.83-39.26-14.5s-15.82-22.02-15.82-37.06c0-12.01 2.68-21.83 8.06-29.44 5.37-7.62 12.99-13.62 22.85-18.02 9.76-4.39 21.87-7.52 36.33-9.38 14.45-1.85 29.44-3.22 44.97-4.1v-.88c0-9.08-3.71-15.36-11.13-18.82-7.42-3.47-18.36-5.2-32.81-5.2-8.69 0-17.97 1.54-27.83 4.61-9.87 3.08-16.94 5.45-21.24 7.1h-4.83v-39.7c5.57-1.46 14.62-3.2 27.17-5.2 12.55-2 25.12-3 37.72-3 29.98 0 51.64 4.61 64.97 13.84s20 23.71 20 43.43v111.91h-52.29v-17.43Zm0-25.6v-34.17c-7.13.59-14.85 1.39-23.14 2.41-8.3 1.02-14.6 2.21-18.9 3.58-5.27 1.66-9.3 4.07-12.08 7.23s-4.17 7.32-4.17 12.48c0 3.41.29 6.18.88 8.32.59 2.14 2.05 4.19 4.39 6.13 2.25 1.95 4.93 3.38 8.06 4.31 3.12.92 8.01 1.39 14.65 1.39 5.27 0 10.62-1.07 16.04-3.21 5.42-2.14 10.18-4.96 14.28-8.47ZM644.44 304.26h-52.88v-81.59c0-6.64-.34-13.26-1.03-19.85-.68-6.59-1.86-11.45-3.52-14.58-1.96-3.61-4.81-6.25-8.57-7.91-3.76-1.66-9.01-2.49-15.75-2.49-4.79 0-9.65.78-14.58 2.34-4.93 1.56-10.28 4.05-16.04 7.47v116.6h-52.88V76.33h52.88v81.59c9.36-7.32 18.36-12.94 26.99-16.85 8.63-3.9 18.21-5.86 28.75-5.86 17.75 0 31.62 5.18 41.62 15.53 10 10.35 15 25.83 15 46.44v107.08ZM812.17 190h-4.68c-2.24-.78-5.85-1.37-10.82-1.76-4.97-.39-9.11-.59-12.42-.59-7.5 0-14.13.49-19.88 1.46-5.75.98-11.94 2.64-18.56 4.98v110.16h-52.88V139.76h52.88v24.17c11.59-9.96 21.68-16.58 30.25-19.85 8.57-3.27 16.47-4.91 23.68-4.91 1.85 0 3.95.05 6.29.15 2.34.1 4.39.25 6.14.44V190ZM1010.21 222.08c0 27.05-7.89 48.37-23.66 63.94-15.77 15.58-37.92 23.36-66.43 23.36s-50.66-7.79-66.43-23.36c-15.77-15.58-23.66-36.89-23.66-63.94s7.93-48.63 23.8-64.16c15.87-15.53 37.96-23.29 66.28-23.29s50.9 7.81 66.58 23.44c15.67 15.63 23.51 36.96 23.51 64.01Zm-64.89 39.99c3.42-4.2 5.98-9.25 7.69-15.16s2.56-14.09 2.56-24.54c0-9.67-.88-17.77-2.64-24.32-1.76-6.54-4.2-11.77-7.32-15.67-3.13-4-6.88-6.83-11.28-8.5-4.39-1.66-9.13-2.49-14.21-2.49s-9.59.68-13.55 2.05c-3.96 1.37-7.74 4.1-11.35 8.2-3.22 3.81-5.79 9.03-7.69 15.67-1.9 6.64-2.86 14.99-2.86 25.05 0 8.99.83 16.77 2.49 23.36 1.66 6.59 4.1 11.89 7.32 15.89 3.12 3.81 6.86 6.59 11.21 8.35 4.34 1.76 9.3 2.64 14.87 2.64 4.78 0 9.35-.81 13.7-2.42 4.34-1.61 8.03-4.32 11.06-8.13Z" class="d"/><rect width="1038.26" height="365" x="5" y="5" class="d" rx="15" ry="15"/>
</g></g></svg>
`;
// ---------------------------------------------------------------------------------------------------------------------------
//
// Телефон
//
// ---------------------------------------------------------------------------------------------------------------------------
for ( vahro_tel of items_vahro_tel ) {
vahro_tel.addEventListener( 'click', vahrotel );
}
for ( vahro_whatsapp of items_vahro_whatsapp ) {
vahro_whatsapp.addEventListener( 'click', vahrotel );
}
function vahrotel( event )
{
event.preventDefault(); // не переходим по ссылке
let display_tel = '';
display_tel = '+' + event.currentTarget.getAttribute("data-zone") + '-' +
event.currentTarget.getAttribute("data-region") + '-' +
event.currentTarget.getAttribute("data-number");
let telefon = event.currentTarget.getAttribute("data-zone") +
event.currentTarget.getAttribute("data-region") +
event.currentTarget.getAttribute("data-number");
// обертка модального окна - div.orata-modal-wrapper
// занимает всю площадь экана, при клике в любое место кроме модального окна убирается - remove()
let vahroModalWrapper = document.createElement('div');
vahroModalWrapper.classList.add('vahro-modal-wrapper');
//
// Формируется основное окно - vahroModal
//
let vahroModal = document.createElement('div');
vahroModal.classList.add('vahro-modal');
vahroModal.classList.add('vahro-modal-corners');
vahroModal.classList.add('vahro-modal-center');
// Логотип Vahro.ru
let aVahroLogo = document.createElement('a');
aVahroLogo.classList.add('vahro-modal-logo');
aVahroLogo.setAttribute( "href", "https://vahro.ru/" );
aVahroLogo.innerHTML = '<div>' + vahro_logo_svg + '</div>';
vahroModal.appendChild( aVahroLogo );
// Номер телефона
let spanTelefon = document.createElement('span');
spanTelefon.classList.add('mail');
spanTelefon.appendChild( document.createTextNode( display_tel ) );
vahroModal.appendChild( spanTelefon );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
// Позвонить на телефон
let aPhone = document.createElement('a');
aPhone.appendChild( document.createTextNode( "Позвонить" ) );
// aPhone.setAttribute( "target","_blank" );
aPhone.setAttribute( "href", "tel:" + telefon );
vahroModal.appendChild( aPhone );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
// Ссылка - копировать в буфер
let aCopyText = document.createElement('a');
aCopyText.setAttribute( "href", "#" );
aCopyText.appendChild( document.createTextNode( 'копировать номер' ) );
aCopyText.addEventListener( 'click', (e) => {
e.preventDefault(); // не переходим по ссылке
navigator.clipboard.writeText( telefon ); // копируем в буфер адрес почты
e.target.innerText ="номер скопирован";
// vahroModalWrapper.remove(); // убираем модальное окно - div.orata-modal-wrapper
} );
vahroModal.appendChild( aCopyText );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
let sendText = document.createElement('span');
sendText.classList.add('text');
sendText.appendChild( document.createTextNode( 'написать в чат' ) );
vahroModal.appendChild( sendText );
// Позвонить на WhatsApp
let aWhatsApp = document.createElement('a');
aWhatsApp.appendChild( document.createTextNode( "WhatsApp" ) );
aWhatsApp.setAttribute( "target","_blank" );
aWhatsApp.setAttribute( "href", "https://wa.me/" + telefon );
vahroModal.appendChild( aWhatsApp );
// Позвонить на Viber
let aViber = document.createElement('a');
aViber.appendChild( document.createTextNode( "Viber" ) );
aViber.setAttribute( "target","_blank" );
aViber.setAttribute( "href", "viber://chat?number=%2" + telefon );
vahroModal.appendChild( aViber );
// Позвонить на Skype
let aSkype = document.createElement('a');
aSkype.appendChild( document.createTextNode( "Skype" ) );
// aSkype.setAttribute( "target","_blank" );
// aSkype.setAttribute( "href", "#" );
vahroModal.appendChild( aSkype );
// <hr>
vahroModal.appendChild( document.createElement('hr') );
// Create link <a> "Close" modal - закрыть окно
let vahroModalClose = document.createElement( 'a' );
vahroModalClose.setAttribute( "href", "#" );
closeTxt = document.createTextNode( "Закрыть окно" );
vahroModalClose.appendChild( closeTxt );
vahroModalClose.addEventListener( 'click', (e) => {
e.preventDefault(); // не переходим по ссылке
vahroModalWrapper.remove(); // убираем модальное окно - div.orata-modal-wrapper
} );
vahroModal.appendChild( vahroModalClose );
vahroModalWrapper.appendChild( vahroModal );
// убираем vahroModalWrapper при клике в любое место кроме модального окна - vahroModalWrapper.remove()
vahroModalWrapper.addEventListener( 'click', (e) => {
const withinBoundaries = e.composedPath().includes( vahroModal );
if ( ! withinBoundaries ) {
vahroModalWrapper.remove();
}
});
body.appendChild( vahroModalWrapper );
aPhone.dispatchEvent( mouseoverEvent );
}
} // window.onload = function()Если нет времени и желания разбираться самостоятельно – обращайтесь