I have a slider with various elements in it and when clicking on a button on a particular element will open a pop-up contain specific details to that selected element. Now my slider is becoming really long and I have been wondering if I can use either JavaScript or anything to make my code look nice and remove the repeating pattern of my code Below is my code:
<!-- Slides 1 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="image location">
</div>
<div class="card_info">
<h3 class="card_title">Title</h3>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro ex vel minima, eaque culpa iusto veritatis ad tempore, unde animi dolorum optio modi nemo harum quia? Eaque, exercitationem et!
</p>
<button data-modal-target="#modal1" class="card_btn">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
In my code I have numerous slides and when clicking on the button Learn More should open another code which repeat itself as follows:
<!-- Modal 1 -->
<div class="modal" id="modal1">
<div class="modal_header">
<div class="modal_image">
<img src="image location">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title">Title</h3>
<div class="modal_para">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fuga assumenda nulla reprehenderit. Numquam culpa, quidem pariatur nam commodi ea necessitatibus incidunt sunt sapiente laboriosam asperiores assumenda repudiandae? Perspiciatis, sed! Veniam?
</p>
</div>
<button data-close-button class="close-button">Close</button>
</div>
</div>
<div id="overlay"></div>
Is there a way for me to continue add other slides and modal in a way that would reduce the repeated HTML pattern in JavaScript or PHP while keeping the integrity of my code?
Advertisement
Answer
You can use a single modal and some javascript to populate that modal.
Below is just an example:
function showText(slideNo) {
var title = document.getElementById("slide_title_" + slideNo).innerText;
var text = document.getElementById("slide_text_" + slideNo).innerText;
document.getElementById("modal_title").innerText = title;
document.getElementById("modal_text").innerText = text;
}
function clearModal() {
document.getElementById("modal_title").innerText = "";
document.getElementById("modal_text").innerText = "";
}
<!-- Slides 1 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="image location">
</div>
<div class="card_info">
<h3 class="card_title" id="slide_title_1"> Slide 1 Title</h3>
<p id="slide_text_1">
Slide 1 Text
</p>
<button class="card_btn" onclick="showText(1)">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
<!-- Slides 2 -->
<div class="swiper-slide">
<div class="card">
<div class="card_image">
<img src="image location">
</div>
<div class="card_info">
<h3 class="card_title" id="slide_title_2"> Slide 2 Title</h3>
<p id="slide_text_2">
Slide 2 Text
</p>
<button class="card_btn" onclick="showText(2)">
<h4>Learn More</h4>
</button>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal" id="modal">
<div class="modal_header">
<div class="modal_image">
<img src="image location">
</div>
</div>
<div class="modal_body">
<h3 class="modal_title" id="modal_title">Title</h3>
<div class="modal_para">
<p id="modal_text">
</p>
</div>
<button class="close-button" onclick="clearModal()">Close</button>
</div>
</div>
<div id="overlay"></div>