Is there a way to only hide the content of the modal, not the modal itself, so when I click next, it shows the content from the next modal, but it doesn’t reopen the next modal, but changes only to the content.
There’s a code of JQuery which creates the Modals accord to the amount of array elements in a text file and a function with which I try to change the Modal content with next/previous buttons
$("#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');
});
});
"<pre><button class=\"btn modal-button\" data-toggle=\"modal\" id=\"buttonOn_" + index + "\" data-target=\"#Modals_" + index + "\" value=\"open Modal\"></button>\n" +
" <h3 class=\"modal-title_" + index + "\"></h3>\n" +
"</pre>\n" +
"<div class=\"modal fade\" id=\"Modals_" + index + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"ModalCenterTitle\" aria-hidden=\"true\">\n" +
" <div class=\"modal-dialog modal-lg modal-dialog-centered\">\n" +
" <div class=\"modal-content\" id=\"modal-content_" + index + "\">\n" +
" <div class=\"modal-body picture\" id=\"modal-body_" + index + "\">\n" +
" <img class=\"img-responsive\" id=\"modalPic_" + index + "\" src=\"\" alt=\"...\">\n" +
" <h2 id=\"modal-title_" + index + "\" class=\"modal-title_" + index + "\"></h2>\n" +
" <p id=\"modal-description_" + index + "\" class=\"modal-description_" + index + "\"></p>\n" +
" <button class=\"btn-prev\" id=\"previous_"+index+"\" onclick=\"\">Previous</button>\n" +
" <button class=\"btn-next\" id=\"next_"+index+"\" onclick=\"\">Next</button>\n" +
" <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\" style='color: white;'>Close</button>\n" +
" </div>\n" +
" </div>\n" +
" </div>\n" +
"</div>\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
That is the array which is returned in php when I call back the .txt file with Json encoded data.
Here I have tried to solve your problem with one model, which is working fine, I can understand that your client is requesting for multiple modals but it’s just code duplication and rework. just check this with json if it can help you out.
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" />
Tags: jqueryjquery