Изменение содержимого модального при нажатии кнопки

Question

В настоящее время я пытаюсь создать разметку модального всплывающего окна в HTML / CSS, как на этом jsfiddle https://jsfiddle.net/ta5zrvxc/

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<div class="modalContainer">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button>Go to Next</button>
  </div>
</div>

Что я хотел бы сделать, нажав кнопку, я хочу изменить содержание модального, например, так. https://jsfiddle.net/k7fht5s6/

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<div class="modalContainer">
  <div class="modalContents">
    <h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate. `enter code here`</p>
    <button>Go to Next</button>
  </div>
</div>

Как мне этого добиться?

Answer 1

Как это?

Примечание. Я удаляю кнопку, если контента больше нет

Прокрутите вниз для простой jQuery версии

const content = [
  "<h1>This is Modal 1</h1>",
  "<h1>This is Modal 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Perferendis atque quo cupiditate. </p>"
];

let cnt = 0;
window.addEventListener("load", function() {
  document.querySelector(".modalContents").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName.toUpperCase() === "BUTTON") {
      cnt++;
      if (cnt < content.length) {
        this.innerHTML = content[cnt]
        if (cnt < content.length - 1) {
          this.innerHTML += '<button>Go to Next</button>'
        }
      }
    }
  })
  document.querySelector(".modalContents").innerHTML = content[cnt] + '<button>Go to Next</button>'
})

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<div class="modalContainer">
  <div class="modalContents">
  </div>
</div>

Я бы порекомендовал вам просто показать и скрыть вещи:

$(function() {
  $("#page1").show()
  $("button").on("click", function() {
    $parent = $(this).closest(".modalContainer") 
    if ($parent.next().is(".modalContainer")) {
      $parent.fadeOut("slow",
        function() {
          $parent.next().fadeIn("slow")
        })
    }
  })
})

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat';
  display: none;
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modalContainer" id="page1">
  <div class="modalContents">
    <h1>This is Modal 1</h1><button>Go to Next</button>
  </div>
</div>
<div class="modalContainer" id="page2">
  <div class="modalContents">
    <h1>This is Modal 2</h1><button>Go to Next</button>
  </div>
</div>
<div class="modalContainer" id="page3">
  <div class="modalContents">
    <h1>This is Modal 3</h1>
  </div>
</div>

Только содержание

$(function() {
  $("#page1").show();
  const $contents = $(".modalContents");
  const length = $contents.length;
  let idx = 0;
  $("button").on("click", function() {
    if (idx < length - 1) {
      $contents.eq(idx).fadeOut("slow",
        function() {
          idx++;
          if (idx >= length-1) $(".modalContainer button").fadeOut();
          $contents.eq(idx).fadeIn("slow")
        })
    }
  })
})

.modalContents {
  display: none;
}

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat';
}


button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modalContainer">
  <div class="modalContents" id="page1">
    <h1>This is Modal 1</h1>
  </div>
  <div class="modalContents" id="page2">
    <h1>This is Modal 2</h1>
  </div>
  <div class="modalContents" id="page3">
    <h1>This is Modal 3</h1>
  </div>
  <button>Go to Next</button>
</div>

Answer 2

добавить addEventListener (щелкнуть) к кнопке, затем получить элемент, затем изменить данные

document.getElementById("myBtn").addEventListener("click", function(){
  var x = document.getElementsByClassName("modalContents")[0];
  
  x.innerHTML = `<h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate.</p>
    <button>Go to Next</button>`
});

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0,0,0,0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button  {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;  
}

<div class="modalContainer">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button id="myBtn">Go to Next</button>
  </div>
</div>

Answer 3

Различные способы, которыми вы можете сделать это:

Если вы используете фреймворк, такой как Angular / Vue / React, вы можете настроить внутреннюю часть модала для отображения маршрута. Нажатие на данную кнопку просто изменяет содержимое маршрута, которое в данный момент отображается в модальном режиме. Много примеров этого в связанных документах (angular .io, et c). В наши дни, это, вероятно, предпочтительный подход, поскольку он избегает работы с манипулированием DOM напрямую.

Вы можете использовать тег «object» для отображения содержимого страницы через атрибут «source». Переключая атрибут источника, вы переключаете внутреннее содержимое. Вы также можете использовать iFrame (я никогда не был поклонником этого метода, но он распространен):

Как загрузить внешнюю веб-страницу в div html страницы

Вы можете работать с DocumentFragment, создать совершенно новую настройку DOM с тем, что вы хотите в ней, и просто добавить ее в div верхнего уровня вашего модала (после очистки старого). Этот API очень мощный, мне всегда нравилось работать с ним.

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Вы можете просто заменить внутренний HTML данного div на что угодно (это наименее рекомендуемый метод, но если ваш контент относительно мягко это приемлемо). Итак:

const elem = document.querySelector([your-css-selector]);
elem.innerHTML = '<div>Your new content</div>';

Естественно, любая из вышеперечисленных подпрограмм может быть запущена обработчиком button.onclick.

Answer 4

Вы можете просто добавить и удалить класс .active, используя jQuery.

, вот демоверсия https://codepen.io/Rahul_Ravindran/pen/xxGMPJG

Я не уверен, что это правильно Кстати, но это работает.

Answer 5

Вы можете вызвать функцию при нажатии кнопки и получить элемент, который необходимо изменить.

function changeContent() {
  document.getElementById("modal-heading").innerHTML = "This is Modal 2";
}

<div class="modalContainer">
  <div class="modalContents">
    <h1 id="modal-heading">This is Modal 1</h1>
    <button onclick="changeContent()">Go to Next</button>
  </div>
</div>

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

Answer 6

Вместо непосредственного изменения содержимого модального режима вы можете скрыть их в своем коде и использовать jQuery для их отображения. Пример:

Живая версия: https://jsfiddle.net/2q37fLew/

<div class="modalContainer" id="modal1">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button>Go to Next</button>
  </div>
</div>

<div class="modalContainer" id="modal2">
  <div class="modalContents">
    <h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate.</p>
    <button>Go to Next</button>
  </div>
</div>

.modalContainer {
  /* your original code... */
  display: none;
}

/* your original code... */

$(document).ready(function () {
  var activeModal = 1;
  $('#modal' + activeModal).show();

  $('.modalContainer button').click(function () {
      $('#modal' + activeModal).fadeOut(300, function onComplete () {
      activeModal++;
      $('#modal' + activeModal).fadeIn();
    });
  });
});

Вам не нужно jQuery, но вы добавили jQuery как один из тегов записей, поэтому я предлагаю решение с этой библиотекой.