Change modal content

Question

Change modal content

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I have this html:

WhenIclickonsaibamais,amodalopenswiththeinformationaccordingtotheplan.

Thehtmlandmodalcontentisbasicallythis:

<divid="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 the same, what changes is the content (title and text).

So, in order not to create two different modals, I want to know how I can do it: When you click on learn more about Plan 1, the content is from Plan 1, and when you click on Plan 2 logically open with the contents of the Plan 2.

What would be the easiest way to do this?

PS: The modal is only generated with CSS .

php html

asked by anonymous 28.05.2015 / 18:44

3 answers

1

I recommend using Jquery:

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

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

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

And so you follow a logic for each.

28.05.2015 / 18:53

1

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
    }

28.05.2015 / 19:20

Displaying an image instead of two using og: image Questions regarding Asp.Net MVC [closed]

score 3 · Accepted Answer

Using jQuery or Javascript you can pass the modal content to a function within the learn more link:

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><ahref="#" 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 can not use jQuery or Javascript you can bring the modal 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 manners:

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

// Ou com for mesmo //
?>