CSS убивает HTML и JavaScript - почему? - PullRequest
Новая
       2

CSS убивает HTML и JavaScript - почему?

1 голос
/ 26 апреля 2019

Я работаю над проектом баннера cookie для моего веб-сайта, и у меня есть все, что мне нужно (HTML, CSS, JavaScript, JQuery), и я полагаю, что у меня есть проблема в Css, потому что все остальное работает.

Идея такова: когда пользователь впервые посещает Веб-сайт -> видит CookieBanner, который он должен принять -> Как только он нажимает кнопку подтверждения, информация будет сохранена в LocalStorage, а баннер исчезнет, ​​и он никогда больше его не увидит ( даже если он переходит на мою следующую страницу или перезагружает ее)

Где-то вдоль линии CSS у меня проблема. Если у кого-то есть идеи или видят проблему, это было бы здорово;)

Вот мой код: 

$(document).ready(function() {
  if (window.localStorage.getItem('accept_cookies')) {
    $('#CookieBanner').hide();
  }

  $("#Accept").click(function() {
    window.localStorage.setItem('accept_cookies', true);
    $('#CookieBanner').hide();
  });
});
#CookieBanner {
  background: rgba(0, 0, 0, .5) !important;
  bottom: 0!important;
  left: 0!important;
  position: fixed!important;
  right: 0!important;
  top: 0!important;
  transition: opacity .15s ease;
  z-index: 2147483647!important;
}

.agj,
#CookieBanner {
  opacity: 0;
  overflow-y: scroll;
  will-change: visibility, opacity
}

.agj {
  background-color: #ffffff;
  bottom: 0;
  box-sizing: border-box;
  color: #000000;
  font-family: Arial, Verdana, sans-serif;
  justify-content: space-between;
  left: 0;
  max-height: 100vh;
  min-height: 300px!important;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  -webkit-font-smoothing: antialiased
}

.agj-content {
  display: flex;
  padding: 60px;
  overflow-y: scroll
}

.title {
  color: #000000;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  margin: 0 0 24px
}

.message {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
  -webkit-font-smoothing: antialiased
}

.buttons {
  display: flex!important;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px
}

#Accept {
  background-color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer!important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 55px!important;
  letter-spacing: 2px;
  line-height: 34px;
  margin: 0 0 15px;
  padding: 0 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased
}

#Accept:hover {
  background-color: #ffffff;
  color: #000000;
}

.buttons #Accept {
  min-width: 315px!important
}

.link {
  color: #000000;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 21px;
  margin: 0 15px
}

.link:hover {
  opacity: .6
}

.link {
  margin: 0
}

.link+.link {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #ffffff
}

@media screen and (max-width:850px) {
  .agj-content {
    flex-wrap: wrap
  }
  .initial-info {
    width: 100%
  }
  .buttons {
    width: 100%;
    padding: 60px 0 0
  }
  .buttons #Accept {
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="CookieBanner">
  <div class="agj">
    <div class="agj-content">
      <div class="initial-info">
        <h2 class="title">Privacy</h2>
        <p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.</p>
      </div>
      <div class="buttons">
        <button id="Accept">Accept</button>
        <a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
      </div>
    </div>
  </div>
</div>

</head>

<body>
  <h1>Test WEbsite</h1>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <br><br><br><br><br><br><br><br>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
</body>

</html>

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Блок CookieBanner должен находиться в теле, а не в разделе заголовка. Кроме того, вы должны изменить непрозрачность на другое значение, отличное от 0 в блоке: 

.agj,#CookieBanner{
    opacity: 0; // change this to 1 or remove it
    ...
}

Это должно сработать.

0 голосов
/ 26 апреля 2019

Поскольку у вас установлена ​​непрозрачность 0 в начале вашего css (и ошибки в вашем html, ваш тег начинается после баннера в вашем коде! Переместите его вверх!), Ваш cookie не будет отображаться в начале.Вы должны показать баннер в начале, а затем, если пользователь примет это, скрыть его (но для начала установите css в значение visible, чтобы он снова отображался).

Во фрагменте отображается баннер cookie, но при нажатии на кнопку «Принять» произошла ошибка.Ошибка возникает здесь [во фрагменте], потому что она не может прочитать свойство окна «принимать куки».«Документ помещен в« песочницу »и в нем отсутствует флаг« allow-same-origin ».»Первоначальная «ошибка сценария» произошла в первой части вашего JavaScript. Подробнее о получении / настройке файлов cookie

Надеюсь, это поможет 

$(document).ready(function() {
 /* $('#CookieBanner').show();*/
  $("#Accept").click(function() {
    window.localStorage.setItem('accept_cookies', true);
    $('#CookieBanner').css({"opacity": "0", "visibility": "hidden"});
  });
});
#CookieBanner {
  background: rgba(0, 0, 0, .5) !important;
  bottom: 0!important;
  left: 0!important;
  position: fixed!important;
  right: 0!important;
  top: 0!important;
  transition: opacity .15s ease;
  z-index: 2147483647!important;
}

.agj,
#CookieBanner {
  opacity: .8;
  visibility:visible;
  overflow-y: scroll;
  will-change: visibility, opacity;
}

.agj {
  background-color: #ffffff;
  bottom: 0;
  box-sizing: border-box;
  color: #000000;
  font-family: Arial, Verdana, sans-serif;
  justify-content: space-between;
  left: 0;
  max-height: 100vh;
  min-height: 300px!important;
  overflow-x: hidden;
  position: fixed;
  right: 0;
  /*-webkit-font-smoothing: antialiased;*/
}

.agj-content {
  display: flex;
  padding: 60px;
  overflow-y: scroll
}

.title {
  color: #000000;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  margin: 0 0 24px
}

.message {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
  /*-webkit-font-smoothing: antialiased*/
}

.buttons {
  display: flex!important;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  padding-left: 60px;
}

#Accept {
  background-color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .2);
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer!important;
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  height: 55px!important;
  letter-spacing: 2px;
  line-height: 34px;
  margin: 0 0 15px;
  padding: 0 13px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .2s ease-in-out;
  white-space: nowrap;
  /*-webkit-font-smoothing: antialiased*/
}

#Accept:hover {
  background-color: #ffffff;
  color: #000000;
}

.buttons #Accept {
  min-width: 315px!important;
}

.link {
  color: #000000;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  font-size: 14px;
  line-height: 21px;
  margin: 0 15px;
}

.link:hover {
  opacity: .6
}

.link {
  margin: 0;
}

.link+.link {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #ffffff
}

@media screen and (max-width:850px) {
  .agj-content {
    flex-wrap: wrap
  }
  .initial-info {
    width: 100%
  }
  .buttons {
    width: 100%;
    padding: 60px 0 0
  }
  .buttons #Accept {
    width: 100%
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <h1>Test Website</h1>
  
  <div id="CookieBanner">
  <div class="agj">
    <div class="agj-content">
      <div class="initial-info">
        <h2 class="title">Privacy</h2>
        <p class="message">This website uses cookies to provide you with the best possible service and website functionality, and to provide social media features and analyse the traffic to our website. If you continue to use our website, you agree to our using cookies.</p>
      </div>
      <div class="buttons">
        <button id="Accept">Accept</button>
        <a class="link" href="#" title="Get more Information about Cookies and how we use them">Show Purposes</a>
      </div>
    </div>
  </div>
</div>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
  <br>

  <p>asdfdslfhsdlhafasldhflaskdfhklsdjf kldsjfklasdj fds fjaskldfjjsdfasdfasdfasdfsd <br> asdfjsadlkfjdskfjksdjfklsdjfksdjfl sdjfajds</p>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...