Click here to Skip to main content
15,867,488 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello I have been working on a project lately where I have a slider with various elements in it such as images and a button learn more. When clicking on that button on a particular element it will open a pop-up contain specific details to that selected element namely will open a particular modal. Hence slide 1 button learn more should open modal1 but my code is becoming really long as I have numerous different slides with different modal and was wondering if I could either use JavaScript or anything to make my code look nice and remove the repeating pattern of slides and model div class while keeping the integrity of my code ?

What I have tried:

<pre>                               <!-- 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>

<!-- 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>
Posted
Comments
Peter_in_2780 30-May-21 4:11am    
Loops in PHP can easily do what you want. Work your way down a list of images or whatever, emit the boilerplate code to display each one. As you do so, figure out a way of linking the buttons to the right modals (such as indexing them...)
It's not difficult.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900