Как вывести всплывающее окно на сайте в Wordpress

289

21 июля 2017, 01:22

Хочу реализовать всплывающее окно с контактами при наведении на номер телефона (т.е. ссылку), как на скриншоте. Пытаюсь выдрать код, но он не хочет запускаться. Может кто подсказать, как это реализовать на WordPress?

При наведении на ссылку окно всплывает:

А также сайт: https://www.oma.by/

Answer 1

Это простой hover. Есть скрытый блок, в нем html всплывающего окна:

<div class="header-top_item-value-dd small-dropdown js-dropdown-body" style="display: none;">
...
</div>

Изначально он имеет свойство display: none;. При наведении меняется на display: block;.

WordPress тут ни при чём - это html + css. Выводите шапку сайта, в ней скрытый блок. При наведении показываете блок. Вот пример:

.header { 
  width: 100%; 
} 
 
.info { 
  width: 100px; 
  height: 300px; 
  background: aliceblue; 
  display: none; 
} 
 
.phone:hover .info { 
  display: block; 
}

<header> 
  <div class="phone">Телефон 
    <div class="info">Много всякой инфы</div> 
  </div> 
</header>

Answer 2

Не важно на чем работает сайт. Нужны лишь html+css+js.

Т.к. пример по ссылке на jQuery, могу предложить такой вариант:

var timeout; 
 
$('.dropdown').on('mouseover', function() { 
  clearTimeout(timeout); 
  $(this).find('.popup').show(); 
  $('body').addClass('overlayed'); 
}); 
 
$('.dropdown').on('mouseleave', function() { 
  var popup = $(this).find('.popup'); 
  timeout = setTimeout(function() { 
    popup.hide(); 
    $('body').removeClass('overlayed'); 
  }, 300); 
});

html, 
body { 
  height: 100%; 
  padding: 0px; 
  margin: 0px; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.overlay { 
  background: rgba(0, 0, 0, 0.7); 
  position: fixed; 
  z-index: 2; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  display: none; 
} 
 
body.overlayed .overlay { 
  display: block; 
} 
 
.block { 
  position: relative; 
  z-index: 3; 
  background: #e5e5e5; 
  padding: 0 10px; 
} 
 
.dropdown { 
  display: inline-block; 
  position: relative; 
  padding: 10px 0; 
} 
 
.trigger { 
  display: inline-block; 
  cursor: pointer; 
  color: #f00; 
} 
 
.popup { 
  position: absolute; 
  top: 100%; 
  left: 0px; 
  width: 200px; 
  background: #fff; 
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); 
  padding: 10px; 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="overlay"></div> 
<div class="block"> 
  Контакт-центр 
  <div class="dropdown"> 
    <span class="trigger">+7 (987) 765-43-21</span> 
    <div class="popup"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
  </div> 
</div>