Всплывающие окна в тапке

Этот код морально устарел. Рекомендую https://teletype.in/@onthewaytothesun/TOu5H19L_O2

Видео: https://youtu.be/ViE4I8H9Z8w

Для создания всплывающего окна вам потребуется:

1. Клей
2. Кнопка, в окно ссылки которой вставлено "javascript:void(0);" (без кавычек)
3. Код создания всплываюшего окна после кнопки
4. Любой стандартный блок таплинка после кода всплываюшего окна. Таким образом, код создания должен быть между кнопкой и тем, что должно всплывать

Код создания всплываюшего блока:

<div class="popupmaker"></div>
  <style>
  
.popup {
 position: fixed;
  width: 100%;
  max-width: 350px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
    padding: 20px 30px;
    background: white;
    filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.3));
    border-radius: 3px;
}
.hidden {
  display: none !important;
}
.block-form>div {
  position: relative;
}
.closebtn {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 2;
  cursor: pointer;
}
.popanim {
  animation: pop-anim 0.2s linear forwards 1;
}
@keyframes pop-anim {
  0% {
    opacity: 0;
   transform: translate(0px, -50%);
  }
  100% {
    opacity: 1;
   transform: translate(-50%, -50%);
  }
  
}
  </style>
  <script>
  Array.from(document.querySelectorAll('.popupmaker')).map((popupmaker) => {
popupmaker.parentElement.parentElement.parentElement.previousElementSibling.classList.add('popupbtn');
popupmaker.parentElement.parentElement.parentElement.nextElementSibling.classList.add('popup', 'hidden'); 
});

Array.from(document.querySelectorAll('.popupbtn')).map((popupbtn) => {
  popupbtn.onclick = function () {
popupbtn.nextElementSibling.nextElementSibling.classList.remove('hidden')
   popupbtn.nextElementSibling.nextElementSibling.classList.add('popanim') 
  }
  });
Array.from(document.querySelectorAll('.popup')).map((popup) => {
  popup.insertAdjacentHTML('afterbegin', `
  <svg class="closebtn" width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="18.5" cy="18.5" r="18.5" fill="#F6D137"/>
<path d="M11.1421 12.4142L12.5563 11L26.6985 25.1421L25.2843 26.5563L11.1421 12.4142Z" fill="black"/>
<path d="M25.1421 11.4142L26.5563 12.8284L12.4142 26.9706L11 25.5563L25.1421 11.4142Z" fill="black"/>
</svg>
  `)
  });
Array.from(document.querySelectorAll('.closebtn')).map((closebtn) => {
   closebtn.onclick = function () {
     closebtn.parentElement.classList.add('hidden')
     closebtn.parentElement.classList.remove('popanim')
   }
});
  </script>

<div class="popupmaker"></div>
  <style>
  
.popup {
 position: fixed;
  width: 100%;
  max-width: 350px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
    padding: 20px 30px;
    background: white;
    filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.3));
    border-radius: 3px;
}
.hidden {
  display: none !important;
}
.block-form>div {
  position: relative;
}
.closebtn {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 2;
  cursor: pointer;
}
.popanim {
  animation: pop-anim 0.2s linear forwards 1;
}
@keyframes pop-anim {
  0% {
    opacity: 0;
   transform: translate(0px, -50%);
  }
  100% {
    opacity: 1;
   transform: translate(-50%, -50%);
  }
  
}
  </style>
  <script>
  Array.from(document.querySelectorAll('.popupmaker')).map((popupmaker) => {
popupmaker.parentElement.parentElement.parentElement.previousElementSibling.classList.add('popupbtn');
popupmaker.parentElement.parentElement.parentElement.nextElementSibling.classList.add('popup', 'hidden'); 
});

Array.from(document.querySelectorAll('.popupbtn')).map((popupbtn) => {
    popupbtn.querySelector('a').removeAttribute('href')
  popupbtn.onclick = function () {
popupbtn.nextElementSibling.nextElementSibling.classList.remove('hidden')
     setTimeout(function(){
    document.querySelector('body').classList.add('modaled')
    }, 50)
    popupbtn.nextElementSibling.nextElementSibling.classList.add('popanim') 
  }
  });
Array.from(document.querySelectorAll('.popup')).map((popup) => {
  popup.insertAdjacentHTML('afterbegin', `
  <svg class="closebtn" width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="18.5" cy="18.5" r="18.5" fill="#F6D137"/>
<path d="M11.1421 12.4142L12.5563 11L26.6985 25.1421L25.2843 26.5563L11.1421 12.4142Z" fill="black"/>
<path d="M25.1421 11.4142L26.5563 12.8284L12.4142 26.9706L11 25.5563L25.1421 11.4142Z" fill="black"/>
</svg>
  `)
  });
Array.from(document.querySelectorAll('.closebtn')).map((closebtn) => {
   closebtn.onclick = function () {
    setTimeout(function(){
     document.querySelector('body').classList.remove('modaled')
    }, 50);
     closebtn.parentElement.classList.add('hidden')
     closebtn.parentElement.classList.remove('popanim')
   }
});
    
  </script>
<script>
 document.addEventListener('DOMContentLoaded', () => {

var targetNode = document.querySelector('body');
var config = {
    attributeFilter: ['class']

}
var callback = function(mutationsList){
if (document.querySelector('.iti__country-list') !==null) {   Array.from(document.querySelectorAll('.iti__country-list li')).map((country) => {
  country.onclick = function () {
  setTimeout(function(){
     document.querySelector('body').classList.add('modaled')
    }, 50);
  }
  });}
	setTimeout(function(){
		if (document.querySelector('body').classList.contains('modaled')) {
			setTimeout(function(){
			document.querySelector('.modaled').setAttribute('onclick', 'closeModal ()')

			}, 50);	
		}
else {
setTimeout(function(){	
document.querySelector('body').removeAttribute('onclick')
}, 100);
}
}, 100);


};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);

});


function closeModal (evt) {
  				setTimeout(function(){
document.querySelector('.popanim').classList.add('hidden')
document.querySelector('.popanim').classList.remove('popanim')
document.querySelector('body').classList.remove('modaled')

				}, 100);			
			}
  
  Array.from(document.querySelectorAll('.popup')).map((closing) => {
  closing.onclick = function (event) {event.stopPropagation();}
  });
  document.addEventListener('DOMContentLoaded', () => {
   Array.from(document.querySelectorAll('.iti__selected-flag')).map((flag) => {
  flag.onclick = function () {setTimeout(function(){
     document.querySelector('body').classList.remove('modaled')
    }, 50);
     flag.closest('div.block-item').classList.remove('hidden')
     flag.closest('div.block-item').classList.add('popanim')}
  });

});
</script>