Всплывающие окно интерфейса на jQuery

<div class="vedasu">
  <header>
  <h3 class="askisu-konuda">ZorNet.ru - сайт вебмастера</h3>
  <button class="kisemage-button"><svg><use href="#kisemage"></use></svg></button>
  </header>
  <div class="osvedom">
  <a class="button">
  <svg>
  <use href="#facebook"></use>
  </svg>
  <span>1. Портал</span>
  </a>
   
  <a class="button">
  <svg>
  <use href="#twitter"></use>
  </svg>
  <span>2. Ресурс</span>
  </a>
   
  <a class="button">
  <svg>
  <use href="#linkedin"></use>
  </svg>
  <span>3. Блоги</span>
  </a>
   
  <a class="button">
  <svg>
  <use href="#email"></use>
  </svg>
  <span>4. Сайты</span>
  </a>
  </div>
  <div class="perexas">
  <div class="adresales">http://zornet.ru/load/prostaja_vsplyvajushhaja_forma_na_javascript/146-1-0-10652</div>
  <button class="copy-link">Скопировать</button>
  </div>
</div>

<button class="lopedsa-button" type="button" title="lopedsa this article">
  <svg>
  <use href="#lopedsa-icon"></use>
  </svg>
  <span>Открыть</span>
</button>

<svg class="adelamun">
  <defs>
  <symbol id="lopedsa-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lopedsa"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path><polyline points="16 6 12 2 8 6"></polyline><line x1="12" y1="2" x2="12" y2="15"></line></symbol>
   
  <symbol id="facebook" viewBox="0 0 24 24" fill="#3b5998" stroke="#3b5998" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></symbol>
   
  <symbol id="twitter" viewBox="0 0 24 24" fill="#1da1f2" stroke="#1da1f2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></symbol>
   
  <symbol id="email" viewBox="0 0 24 24" fill="#777" stroke="#fafafa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></symbol>
   
  <symbol id="linkedin" viewBox="0 0 24 24" fill="#0077B5" stroke="#0077B5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-linkedin"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></symbol>
   
  <symbol id="kisemage" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-square"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="9" y1="9" x2="15" y2="15"></line><line x1="15" y1="9" x2="9" y2="15"></line></symbol>
  </defs>
</svg>

.adelamun {
  display: none;
}

svg {
  width: 20px;
  height: 20px;
  margin-right: 7px;
}

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #6e6a6a;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: 3px;
  text-transform: capitalize;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
  border: 2px solid #d5d3d3;
  cursor: pointer;
}

button:hover, .button:hover {
  border-color: #c4dddd;
}

.lopedsa-button, .copy-link {
  padding-left: 30px;
  padding-right: 30px;
}

.lopedsa-button, .vedasu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.vedasu {
  display: none;
  width: 95%;
  max-width: 500px;
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
  z-index: -1;
  border: 1px solid #cfc9c9;
  padding: 20px;
  border-radius: 4px;
  background-color: #e6e6ed;
}

.vedasu.is-open {
  display: block;
  z-index: 2;
}

header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.osvedom {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  margin-bottom: 20px;
}

.kisemage-button {
  background-color: transparent;
  border: none;
  padding: 0;
}

.kisemage-button svg {
  margin-right: 0;
}

.perexas {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 4px;
  background-color: #e9e3e3;
}

.adresales {
  margin-right: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

const lopedsaButton = document.querySelector('.lopedsa-button');
const lopedsaDialog = document.querySelector('.vedasu');
const kisemageButton = document.querySelector('.kisemage-button');

lopedsaButton.addEventListener('click', event => {
  if (navigator.lopedsa) {  
  navigator.lopedsa({
  title: 'красивое окно',
  }).then(() => {
  console.log('Благодарю, что поделились!');
  })
  .catch(console.error);
  } else {
  lopedsaDialog.classList.add('is-open');
  }
});

kisemageButton.addEventListener('click', event => {
  lopedsaDialog.classList.remove('is-open');
});