Modal popup on card tiles button

Hi, I need to create a popup modal(with black translucent background and content in center with white background) which would open in full page. Actually there is this pink section with card tiles, some of them have ‘+more info’ button. I need this button to open that modal with content in it. There are 7 card tiles having this ‘+more info’ button. So I need 7 diff modals for those tiles. This is the code so far I tried. I inserted it in the code block element provided by theme page builder.

<div id="modal-1" class="modal" style="display: none;
 position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; background-color: rgba(0, 0, 0,0.7);
justify-content: center;
align-items: center;">
        <div class="modal-content" style="background-color: #fff;
 padding: 20px;
 border-radius: 5px;">
            <h2>Vending</h2>
            <p>Customer spending has changed and cash is no longer king. Appeal to more customers by adding cashless payments to your vending machines. Increase their customer offering and benefit from increased revenue as a Latpay Partner.</p>
            <span class="close-button" onclick="closeModal('modal-1')" style="position: absolute;
 top: 10px; right: 10px;
cursor: pointer;">X</span>
        </div>
    </div>
    <div id="modal-2" class="modal">
        <div class="modal-content">
            <h2>EV Charging</h2>
            <p>Electric vehicle adoption is on the rise and leading to greater demand for EV charging stations globally. Equip your stations technology with robust unattended terminals purposefully designed to withstand changing and sometimes extreme weather conditions. Our products are ruggedly designed and can withstand temperatures between -25C and 70C, can support any OS and offers local payment methods.<br> Facilitate growing demand and increase your revenue as a Latpay Partner.</p>
            <span class="close-button" onclick="closeModal('modal-2')">X</span>
        </div>
    </div>
    <div id="modal-3" class="modal">
        <div class="modal-content">
            <p>Petrol Stations</p>
            <h2>Pay at Pump</h2>
            <p>Offering pan-European or cross border acquiring and processing capablities, not just UK.</p>
            <span class="close-button" onclick="closeModal('modal-3')">X</span>
        </div>
    </div>
    <div id="modal-4" class="modal">
        <div class="modal-content">
            <h2>Self Service Food & Drink</h2>
            <p>Integrating cashless payment solutions is an easy way to increase end customer satisfaction and adoption, and also drives additional revenue into your business.<br>With flexible commercial arrangements, there is a model to suit your business and to scale your growth.</p>
            <span class="close-button" onclick="closeModal('modal-4')">X</span>
        </div>
    </div>
    <div id="modal-5" class="modal">
        <div class="modal-content">
            <h2>Laundry</h2>
            <p>Meet changing customer demand and offer a product that facilitates multiple payment methods. We provide flexible, secure and robust payment solutions that provide your network with a simple process for app based, contactless, PIN, and QR code payments.<br>Facilitate growing demand and increase your revenue as a Latpay Partner.</p>
            <span class="close-button" onclick="closeModal('modal-5')">X</span>
        </div>
    </div>
    <div id="modal-6" class="modal">
        <div class="modal-content">
            <h2>Donations</h2>
            <p>Align strategy with execution and ensure your donors have the payment infrastructure available to complete their donations.</p>
            <span class="close-button" onclick="closeModal('modal-6')">X</span>
        </div>
    </div>
    <div id="modal-7" class="modal">
        <div class="modal-content">
            <h2>Entertainment Machines</h2>
            <p>Add cashless payment methods to your tech hardware and upgrade the experience for your network, and for your end customers. Easily integrate with Latpay and will increase satisfaction rates, adoption and additional revenue into your business. Discover a range of flexible commercial arrangements to suit your business and to scale your growth.</p>
            <span class="close-button" onclick="closeModal('modal-7')">X</span>
        </div>
    </div>

<script>
        // Function to open a modal
        function openModal(button-1) {
            document.getElementById(button-1).style.display = 'block';
        }

        // Function to close a modal
        function closeModal(button-1) {
            document.getElementById(button-1).style.display = 'none';
        }

        // Add click event listeners to each card
        document.getElementById('button-1').addEventListener('click', function() {
            openModal('modal-1');
        });
        document.getElementById('card-2').addEventListener('click', function() {
            openModal('modal-2');
        });
        document.getElementById('card-3').addEventListener('click', function() {
            openModal('modal-3');
        });
        document.getElementById('card-4').addEventListener('click', function() {
            openModal('modal-4');
        });
        document.getElementById('card-5').addEventListener('click', function() {
            openModal('modal-5');
        });
        document.getElementById('card-6').addEventListener('click', function() {
            openModal('modal-6');
        });
        document.getElementById('card-7').addEventListener('click', function() {
            openModal('modal-7');
        });
    </script>

I’m having really hard time trying to create this modal popup as this code doesn’t work.
This is code for one card tiles & button as reference :

<div class ="cardslider"><img id="cvvModal" src="https://latpay.com/wp-content/uploads/2023/08/Group-427.png" width="60"/><span style="font-size:25px;padding-top: 10px;">Vending</span><button id="button-1" style="padding-top: 10px; border: none; background: none;font-weight:bolder;"> + More info</button></div>

Please check the picture attached for reference:

I need something like this – https://prnt.sc/MP83Xz06SyOr
The section I need help with – https://prnt.sc/sQgeWHE0Kbni
‘+more info’ button which should trigger a popup – https://prnt.sc/C8dffX8uDmvk

I’m quite new to this platform, so can’t figure out where to place the right code to make this modal. My humble request please help me with code and its place to be placed to create proper modal easily. Much Thanks..

• This topic was modified 1 year, 5 months ago by pgdev.

The page I need help with: [log in to see the link]