Как заставить бар исчезнуть после нажатия «Я согласен» с помощью Bootstrap - PullRequest
Новая
       6

Как заставить бар исчезнуть после нажатия «Я согласен» с помощью Bootstrap

0 голосов
/ 19 ноября 2018

введите описание изображения здесь кто-нибудь знает, как заставить эту панель исчезнуть после нажатия "Я согласен"? Я искал на начальной загрузке, но не мог найти решение. Пожалуйста помоги. Ниже мой код: 

<div id="cookie-message" class="cookie-message notification center-horizontal bottom static enable"> 
            <div class="strip color-ash" >
              <span class="show-tablet">We use cookies to deliver our services.</span>
              By using our website, you agree to the use of cookies as described in our&nbsp;
              <a class="color-oil" href="/assets/static/downloads/privacy-policy.pdf" target="_blank">Privacy&nbsp;Policy</a>&nbsp;—&nbsp; &nbsp;<a tabindex="0" href="#" class="cm-close color-deepblue">I&nbsp;Agree</a>
            </div>
          </div>

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Целевая связь с базовыми классами .cm-close.color-deepblue; Добавьте слушателя события к нему; И по клику сделайте parentNode (div id = "cookie-message"), чтобы отобразить none. 

<div id="cookie-message" class="cookie-message notification center-horizontal bottom static enable">
  <div class="strip color-ash">
    <span class="show-tablet">We use cookies to deliver our services.</span> By using our website, you agree to the use of cookies as described in our&nbsp;
    <a class="color-oil" href="/assets/static/downloads/privacy-policy.pdf" target="_blank">Privacy&nbsp;Policy</a>&nbsp;—&nbsp; &nbsp;<a tabindex="0" href="#" class="cm-close color-deepblue">I&nbsp;Agree</a>
  </div>
</div>
<script>
  document.querySelector('.cm-close.color-deepblue').addEventListener('click', (event) => event.target.parentNode.style = "display:none")
</script>

Упрощенная версия с баром будет: 

<div id="bar">

  <div id="cookie-message">
    <div>
      By using our website, you agree to the use of cookies as described in our&nbsp;
      <a href="#">Privacy&nbsp;Policy</a>&nbsp;—&nbsp; &nbsp;<a href="#" class="link">I&nbsp;Agree</a>
    </div>
  </div>

</div>
<script>
  document.querySelector('.link').addEventListener('click', () => document.querySelector('#bar').style = "display:none")
</script>
0 голосов
/ 19 ноября 2018

Поскольку вы используете Bootstrap, попробуйте это с помощью jQuery: 

$('.color-oil').on('click', function() {
    $('#cookie-message').hide()
})
  1. Вы добавляете прослушиватель события щелчка по ссылке
  2. Когда этот щелчок произойдет, мыполучите div и вызовите метод hide.

Дайте мне знать, работает ли он для вас.

...