Могу ли я скрыть только содержимое Bootstrap Модал?

Question

Есть ли способ скрыть только содержимое модала, а не сам модал, поэтому, когда я нажимаю «Далее», он показывает содержимое из следующего модала, но не открывает заново следующий модал, а меняет только на контент. Там есть код JQuery, который создает модальное соответствие количеству элементов массива в текстовом файле, и функцию, с помощью которой я пытаюсь изменить содержимое модального режима с помощью следующих / предыдущих кнопок

$("#Modals_"+index).each(function () {
    var currentModal = $(this);
    // Modal next
    currentModal.find('.btn-next').click(function () {
        currentModal.modal('hide');
        currentModal.closest("div[id^='Modals_']").nextAll("div[id^='Modals_']").first().modal('show');
    });
    //Modal previous
    currentModal.find('.btn-prev').click(function () {
        currentModal.modal('hide');
        currentModal.closest("div[id^='Modals_']").prevAll("div[id^='Modals_']").first().modal('show');
    });
});

"\n" +
"     \n" +
"

\ n "+" \ n "+" \ n "+" \ n "+" \ n "+" \ "... \" \ n "+" \ n "+" \ n "+" Предыдущая \ n "+" Следующая \ n "+" Закрыть \ n "+" \ n "+" \ n "+ " \ n" + " \ n");

Array
(
    [0] => Array
        (
            [nameLV] => Loku līnijas mezgls
            [descriptionLV] => Mezgls, kas izskatās pēc loka
            [nameEN] => Bowline knot
            [descriptionEN] => Angliski
            [nameRU] => Узел носовой линии
            [descriptionRU] => Krieviski
            [Image] => bowline.png
        )

    [1] => Array
        (
            [nameLV] => Astoņnieku mezgls
            [descriptionLV] => Mezgls 8 formā
            [nameEN] => Figure Eight knot
            [descriptionEN] => Angliski
            [nameRU] => Восьмерка узел
            [descriptionRU] => Krieviski
            [Image] => figureEight.png
        )

    [2] => Array
        (
            [nameLV] => Makšķernieku mezgls
            [descriptionLV] => Izmanto tikai un vienīgi copermaņi
            [nameEN] => Fishermans knot
            [descriptionEN] => Used only and just only by fishermen fisherweman gender neutral
            [nameRU] => Copermanskij uzel
            [descriptionRU] => Tolko copermanski nuzno etot uzel
            [Image] => FishermansStyle.png
        )

    [3] => Array
        (
            [nameLV] => Sakabes mezgls
            [descriptionLV] => Mezgls ko izmanto lai sakabinātu lietas
            [nameEN] => Bunt Line Hitch knot
            [descriptionEN] => Angliski
            [nameRU] => Узел сцепления
            [descriptionRU] => Krieviski
            [Image] => buntlineHitch.png
        )

)
LV
EN

Это массив, который возвращается в php, когда я перезваниваю файл .txt с Json закодированные данные.

Answer 1

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

var json = [{
	"title": "title1",
	"image": "image1",
	"description": "description1"
}, {
	"title": "title2",
	"image": "image2",
	"description": "description2"
}];

$(function() {
  $("#next-btn").on("click", function() {
      var currentId = $(document).find("#position").val();
      id = $("#"+currentId).next();
      nextId = id.data("json")
      btnId = id.attr("id");
      if(nextId!==undefined) {
        openModal(nextId, btnId);
      } else {
        alert("last");
      }
  });
  
  $("#prev-btn").on("click", function() {
      var currentId = $(document).find("#position").val();
      id = $("#"+currentId).prev();
      prevId = id.data("json");
      btnId = id.attr("id");
      if(prevId!==undefined) {
        openModal(prevId, btnId);
      } else {
        alert("first");
      }
  });
  
  $(".openmodal").on("click", function() {  
      openModal($(this).data("json"), $(this).attr('id'));
  });
});


function openModal(id, btnId) {
    var js = json[id];
    title = js.title;
    image = js.image;
    description = js.description;
    $("#position").val(btnId);
    $(".modal-title").html(title);
    $(".modal-body").html("image"+image+", description"+description);
    $("#myModal").modal('show');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3 class="modal-title">Heading</h3>
	</div>
	<div class="modal-body">
		
	</div>
	<div class="modal-footer">
    <input type="text" name="current" value="" id="position" />
		<button id="prev-btn" class="btn btn-warning">Prev</button>
        <button id="next-btn" class="btn btn-primary">Next</button>
		<button class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
   </div>
  </div>
</div>

<input type="button" id="btn1" name="modal-open" data-json=0 class="openmodal btn btn-success" value="Open Model1" />

<input type="button" id="btn2" name="modal-open" data-json=1 class="openmodal btn btn-success" value="Open Model2" />