Баннер не отображается в верхней части веб-страницы - PullRequest
Новая
       0

Баннер не отображается в верхней части веб-страницы

0 голосов
/ 11 марта 2020

Я пытаюсь протестировать баннер, который я создал, но у меня, похоже, есть проблемы.

Я надеялся, что смогу увидеть свой баннер и текст в верхней части страницы, как успешный, так и неудачный. и чтобы он отображал X в элементах div баннера, чтобы баннер можно было закрыть.

Вместо этого происходит то, что я не вижу ни одного баннера вверху страницы, а X сверху. уголок сайта. Если я нажимаю X, он скрывает мою веб-страницу.

Не уверен, что я делаю неправильно, поэтому хотел бы получить некоторые рекомендации. Я хочу, чтобы оба баннера на данный момент отображались в верхней части веб-страницы, а соответствующие значки закрытия (x) находились внутри каждого баннера, и если этот флажок установлен, баннер закрывается.

Ниже приведен мой код: 

    #stripe-info-success {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: green;
        width: 50%;
      }
      #stripe-info-success.visible {
        display: block;
      }

      #stripe-info-failure {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: red;
        width: 50%;
      }
      #stripe-info-failure {
        display: block;
      }

      #close {
        float:right;
        display:inline-block;
        padding:2px 5px;
        color: black;
        background:#ccc;
    }

    #close:hover {
        float:right;
        display:inline-block;
        padding:2px 5px;
        background:black;
        color:#ccc;
        cursor: pointer;
    }

Привет,

Я пытаюсь проверить созданный мною баннер, но у меня, похоже, возникают проблемы.

Я надеялся, что мой баннер и текст появятся в верхней части страницы. как успешный, так и неудачный, и для отображения X в div баннера, чтобы баннер можно было закрыть.

Вместо этого происходит то, что я не вижу ни одного баннера сверху страница и X находится в верхнем углу веб-сайта. Если я нажимаю X, он скрывает мою веб-страницу.

Не уверен, что я делаю неправильно, поэтому хотел бы получить некоторые рекомендации. Я хочу, чтобы оба баннера на данный момент отображались в верхней части веб-страницы, а соответствующие значки закрытия (x) находились внутри каждого баннера, и если этот флажок установлен, баннер закрывается.

Ниже приведен мой код: 

<div id="stripe-info-success">Your payment was successful
    <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>X</span>
  </div>
  <div id="stripe-info-failure">Your payment was cancelled</div>
  <span id='close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>X</span>
</div>

....

<script>
(".buynow").on("click", validate);

window.onload = function(){
    document.getElementById('close').onclick = function(){
        this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
    };
};

</script>

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Пожалуйста, попробуйте ниже код: 

<!DOCTYPE html>
<html>
<style>
 #stripe-info-success {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: green;
        width: 50%;
      }
      #stripe-info-success.visible {
        display: block;
      }

      #stripe-info-failure {
        display: none;
        position: fixed;
        top: 0;
        float:right;
        right: 0;
        background-color: red;
        width: 50%;
      }
      #stripe-info-failure {
        display: block;
      }

      .close {
        float:right;
        display:inline-block;
        padding:2px 5px;
        color: black;
        background:#ccc;
    }

    .close:hover {
        float:right;
        display:inline-block;
        padding:2px 5px;
        background:black;
        color:#ccc;
        cursor: pointer;
    }
</style>
<body>
<div id="stripe-info-success">Your payment was successful
    <span class='close'>X</span>
  </div>
  <div id="stripe-info-failure">Your payment was cancelled
  <span class='close'>X</span></div>
</div>
<script>
window.onload = function(){
var label = document.getElementsByClassName('close');
for (var i = 0; i<label.length; i++) {
  label[i].onclick = function () {
  var el = (this.parentNode);
  el.parentNode.removeChild(el);
  };
}
};

</script>
</body>

</html>
0 голосов
/ 11 марта 2020

css: 

#stripe-info-success {
  display:none;
  overflow: hidden;
  background-color: green;
  position: fixed;
  top: 0;
  width: 100%;
}

jscript: 

<script>
$(document).ready(function(){
  $('.close').click(function() {
   this.parentNode.parentNode.parentNode
        .removeChild(this.parentNode.parentNode);
        return false;
});
});
</script>

Изменить идентификатор диапазона на класс кнопки. надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...