Modal windows

Started by kaufenpreis, Sep 18, 2022, 02:03 AM

Previous topic - Next topic

kaufenpreisTopic starter

Hello everybody!
Such a topic: there is a database.
There is a landing page.
There is a moment on this landing page where a modal appears when you click on the link.
The difficulty is that there are 20 such links, and the modals should be of the same design, but of different (very voluminous) content.
Titles and content will be pulled from the database.

Question: How can I make one template modal window and insert content from the database into it?
  •  

atocloud

well, for instance, you can do this (using jQuery):
<a href="#" class="item" data-id="1">456</a>
$(document).on('click', '.item', function(e){
    let id = $(this).data('id');
    $.ajax({
        url:"here handler url",
        type:'GET',
        data: {
            "action": "get_data",
            "id": id
        },
    })
    .done(function(data){
        $(".modal").html(data);
        $(".modal").addClass('active'); // here you need to show the modal, I don't know how you implemented it.
    });
});


In the handler we write something like that:
$(document).on('click', '.item', function(e){
    let id = $(this).data('id');
    $.ajax({
        url:"here handler url",
        type:'GET',
        data: {
            "action": "get_data",
            "id": id
        },
    })
    .done(function(data){
        $(".modal").html(data);
        $(".modal").addClass('active'); // here you need to show the modal, I don't know how you implemented it.
    });
});

As a result, with each click in the modal window, we show different values. In the handler, we output the necessary html and that's it.
That is the most primitive instance, just to understand the logic.
  •