1

Здравствуйте участники форума, скажу честно js только начинаю изучать. Нужна ваша помощь небольшая знаю что решение простое но сам дойти не могу в общем вот скрипт попап окна

сам скрипт

<script>
// Получаем попап
var popup = document.getElementById('mypopup');

// Получаем кнопку, открывающую попап
var btn = document.getElementById("myBtn");

// Получаем span, закрывающий попап
var span = document.getElementsByClassName("close")[0];

// Открываем попап по клику
btn.onclick = function() {
    popup.style.display = "block";
}

// Закрываем по кнопке
span.onclick = function() {
    popup.style.display = "none";
}

// Закрываем попап по клику в любом месте
window.onclick = function(event) {
    if (event.target == popup) {
        popup.style.display = "none";
    }
}
</script>

стили и сам html

<style>
/* Стиль модального окна Mobirise */
.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Контент модального окна Mobirise */
.popup-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Включаем анимацию */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* Кнопка закрыть */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.popup-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.popup-body {padding: 2px 16px;}

.popup-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>

<!-- Код попап окна Mobirise-->
<div id="mypopup" class="popup">
  <!-- Контент попап окна Mobirise -->
  <div class="popup-content">
    <div class="popup-header">
      <span class="close">&times;</span>
      <h2>popup Header</h2>
    </div>
    <div class="popup-body">
      <p>Some text in the popup Body</p>
      <p>Some other text...</p>
    </div>
    <div class="popup-footer">
      <h3>popup Footer</h3>
    </div>
  </div>
</div>

и кнопка вызова

<button id="myBtn" class="btn btn-primary">Открыть попап</button>

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

4
  • 1
    Атрибут id у элемента должен быть уникальным. Вызов document.getElementById("myBtn") возвращает вам только одну кнопку и только к этой кнопке добавляете обработчик собитий 2 окт 2018 в 19:46
  • Так и что сделать в этом случае подскажите пожалуйста? 2 окт 2018 в 19:50
  • Пройтись циклом по всех кнопках и каждой добавить обработчик. Не забывайте - id элемента должен быть уникальным. 2 окт 2018 в 19:56
  • тоесть четыре раза прописать весь скрипт? для каждой кнопки отдельно? 2 окт 2018 в 20:00

1 ответ 1

0

Убрать id у кнопки.
Убрать // Получаем кнопку, открывающую попап ...
Заменить // Открываем попап по клику ... на код:

Array.prototype.slice.call(document.querySelectorAll('.btn')).forEach(function(element) {
  element.addEventListener('click', function(ev) {
    popup.style.display = 'block';
  });
});

А потом хоть мильён кнопок можете добавлять. Главное, чтобы у них class был одинаковый.

2
  • ой спасибо то есть там где '.btn' надо прописать тот класс который объединяет все кнопки на которых попап будет так? 2 окт 2018 в 20:54
  • @ВалентинЛифанов Именно так.
    – UModeL
    2 окт 2018 в 21:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.