Changing the modal content

Question

I have this html:

When I click on saiba mais, a modal is opened with the information according to the plan.

The html and modal content is basically this:

<div id="abrirModal" class="modalDialog">
    <a class="close" title="Fechar" href="#fecharModal">X</a>
    <div class="modal">
        <div class="description_service">
            <span class="title_modal"><?php echo $title_modal; ?></span>
            <span class="text_modal"><?php echo $text_modal; ?></span>
        </div>
    </div>
</div>

The two are equal, what changes is the content (title and text).

So in order not to have to create two different modals, I want to know how I can do it so that: When you click on more of Plan 1, the content is Plan 1, and when you click on Plan 2 logically opens with the content of Plan 2.

What would be the easiest way to do that?

PS: Modal is generated only with CSS.

Answer 1

Using jQuery or Javascript you can pass the content of the modals to a function within the 'learn more':

function funcao(conteudo, titulo) {
  $("#titulo").html(titulo);
  $("#conteudo").html(conteudo);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" onclick="funcao('$bodyModal1', '$tituloModal1')">saiba mais1</a></p>
<p><a href="#" onclick="funcao('$bodyModal2', '$tituloModal2')">saiba mais2</a></p>

<div id="modal">
  <p id="titulo"></p>
  <p id="conteudo"></p>
</div>

If you cannot use jQuery or Javascript you can bring the modals already mounted in PHP, for example:

<?php
$conteudos = //buscar no bancou ou outro lugar
for ($i=0; $i < sizeof($conteudos); $i++) {
  $modais[$i] =
   '<div id=\"abrirModal\" class=\"modalDialog\">
    <a class=\"close\" title=\"Fechar\" href=\"#fecharModal\">X</a>
    <div class=\"modal\">
        <div class=\"description_service\">
            <span class=\"title_modal\">' . $conteudo[$i]["titulo"] . '</span>
            <span class=\"text_modal\">' . $conteudo[$i]["conteudo"] . '</span>
        </div>
    </div>
    </div>'
}
?>

And in HTML just print the modals:

<?php
echo $modais[0];
echo $modais[1];

// Ou com for mesmo //
?>

Answer 2

I advise using Jquery:

1 - Create an event for each know more being identified by an ID: $('#saiba1').click( function() {....

2 - Use html() or text() function, depending on the content to add:

$( ".title_modal" ).html( "<?=$title_modal_1?>" );
$( ".text_modal" ).html( "<?=$text_modal_1?>" );

And so you follow a logic for each.

Answer 3

Do the following...

<a href="javascript:;" onclick="modaModal('<?php echo $title_modal; ?>', '<?php echo $text_modal; ?>');">Click me (seubotao)</a>

function mudaModal(titulo, texto) {
        $(".classeQueChamaSeuModal").click(); // para chamar seu modal
        $(".title_modal").html(titulo); //muda conteudo do titulo
        $(".text_modal").html(texto); //muda conteudo do texto
    }