В этом сообщении блога мы рассмотрим различные методы передачи данных JavaScript в тело модального окна Bootstrap, не полагаясь на традиционный тег ввода. Используя альтернативные подходы, вы можете динамически заполнять модальное тело данными и улучшать взаимодействие с пользователем. Итак, приступим!

Метод 1: использование манипуляций с элементами HTML
Один из способов передачи данных в тело модального окна — манипулирование элементами HTML. Вы можете создать скрытый элемент на своей странице и обновить его содержимое нужными данными. Затем, используя JavaScript, вы можете получить данные из этого элемента и динамически вставить их в тело модального окна.

Пример:
HTML:

<div id="hiddenData" ></div>

JavaScript:

// Set the data
document.getElementById('hiddenData').innerText = 'Your data goes here';
// Retrieve the data and populate the modal body
var data = document.getElementById('hiddenData').innerText;
document.getElementById('modalBody').innerText = data;

Метод 2: использование атрибутов данных
Bootstrap предоставляет удобный способ передачи данных модальным элементам с использованием атрибутов данных. Вы можете установить атрибут данных для модального элемента триггера и получить его значение при открытии модального окна. Затем вы можете заполнить модальное тело полученными данными.

Пример:
HTML:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-data="Your data goes here">Open Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body" id="modalBody"></div>
    </div>
  </div>
</div>

JavaScript:

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // Button that triggered the modal
  var data = button.data('data'); // Retrieve the data from the data attribute
  var modal = $(this);
  modal.find('.modal-body').text(data); // Populate the modal body with the retrieved data
});

Метод 3: получение данных из API
Если вам нужно получить данные из API и отобразить их в модальном теле, вы можете использовать функцию выборки JavaScript или любую библиотеку AJAX (например, 7) для асинхронного получения данных. После получения данных вы можете заполнить модальное тело полученной информацией.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    document.getElementById('modalBody').innerText = data;
  });

var myData = {
  name: 'John',
  age: 25,
  // Other properties...
};
document.getElementById('modalBody').innerText = myData.name + ' is ' + myData.age + ' years old.';

// Set the data in local storage
localStorage.setItem('myData', 'Your data goes here');
// Retrieve the data and populate the modal body
var data = localStorage.getItem('myData');
document.getElementById('modalBody').innerText = data;