ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Всплывающие окно интерфейса на jQuery

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

Всплывающие окно интерфейса на jQuery
Интересное по функции окно интерфейса, которая содержит информацию для показа, где может быть навигация или кнопки поделиться в социальных сайтах. А точнее, данное приложения может задействована, как системные возможности, которые идут для обмена ресурсами, а также в нативные приложения. Если рассматривать шире предоставленные функции, то здесь явно возможность делиться ресурсами, это безусловно лишь половина функционала, где его можно применить. Можно даже сравнить с модальным окном, где мы видим разные функции или описание, что на данном материала не исключаю увидеть.

Мы с начало на страницы видим кнопку, где вписан шрифтовая иконка с названием, которая просить кликнуть. И уже при клике срабатывает анимация эффекта появление окна, где по умолчанию оно небольшое, так как сделано для социальных кнопок, а точнее где вы можете поделиться информацией по социальным сетям данной информацией на которой открыто окно. Но как уже было сказано, что HTML можно переписать и поставить какие-то новости, но здесь больше зависит от самого тематического ресурса. Так как это окно универсально, и подойдет под множество вариантов, что нам изначально не нужно видеть, но при клике одно появляется.

Так выглядит кнопка, что можно оформить под стиль сайта:

Окно интерфейса для информации на сайте

Это уже при клике, где появляться окно с данными:

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

Установка:

HTML

Код
<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>

CSS

Код
.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;
}

JS

Код
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');
});

Допустим, что после выполнения приведенного кода, где пользователь может выбрать выбрал данное приложение под электронную почту, это как еще один вариант.

Или можно поделиться каким то секретным текстом где присутствует URL-адреса или сделать чисто устав сайта, что можно, а что нет, и красиво оформить в окне. Такое оригинальное разрешение здесь расширяет гибкость вариантов в его использование.

Демонстрация
2022-06-30 Загрузок: 1 Просмотров: 318 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 0
avatar