Question:
I'm having some difficulties, I know this is not the ideal way, but it's what I need at the moment. I have a list of medicos and I need to call a different modal for each one of them, without a database, even static.
Here's my code:
<section class="about text-center" id="about">
<div class="container">
<div class="row">
<div class="header-backup"></div>
<h2>Dentistas</h2>
<div class="col-md-6 col-sm-6">
<div class="col-sm-12" style="background-color:lavender;">
<h3>Dentistas</h3>
<div class="list-group">
<a href="#" class="list-group-item " data-target="#myModal" data-toggle="modal">
<h4 class="list-group-item-heading">Antonio Andrade Santos</h4>
</a>
<a href="#" class="list-group-item" data-target="#myModal" data-toggle="modal">
<h4 class="list-group-item-heading">Armando Sambataro </h4>
</a>
<a href="#" class="list-group-item" data-target="#myModal" data-toggle="modal">
<h4 class="list-group-item-heading">Joao Eduardo Albieri Marinho</h4>
</a>
<a href="#" class="list-group-item " data-target="#myModal" data-toggle="modal">
<h4 class="list-group-item-heading">Raul Coutinho Rodrigues Da Matta</h4>
</a>
<a href="#" class="list-group-item " data-target="#myModal" data-toggle="modal">
<h4 class="list-group-item-heading">Rodolpho Telarolli Junior</h4>
</a>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="header-backup"></div>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Antonio Andrade Santos</h4>
</div>
<div class="modal-body">
<div class="modal-perso">
<div class="info-detail2">
<ul><li><i class="fa2 fa-calendar"></i><span class="span-modal"> Segunda Feira - Sexta Feira:</span> 8:00 as 18:00 </li></ul>
<ul><li><i class="fa2 fa-map-marker"></i><span class="span-modal"> Endereço:</span> São Paulo </li></ul>
<ul><li><i class="fa2 fa-phone"></i><span class="span-modal"> Telefone:</span> (00) 0000-0000 </li></ul>
<ul><li><i class="fa2 fa-phone"></i><span class="span-modal"> Telefone:</span> (00) 0000-0000 </li></ul>
<ul><li><i class="fa2 fa-fax"></i><span class="span-modal"> CRM:</span> (123)984-1234</li></ul>
<ul><li><i class="fa2 fa-envelope"></i><span class="span-modal"> Email:</span> teste@hotmail.com</li></ul>
</div>
</div class="div-foto3x4">
<div><img src="img/foto 3x4.jpg" class="foto3x4" alt="foto"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
What to change in the new modal and how to call it in the medico 's div ?
Answer:
You can take advantage of the HTML 5 data attributes:
$('.list-group-item').on('click', function(e) {
const to_append = '<ul><li><i class="fa2 fa-calendar"></i><span class="span-modal">' +$(this).data('horario')+ '</li></ul><ul><li><i class="fa2 fa-map-marker"></i><span class="span-modal">' +$(this).data('endereco')+ '</li></ul><ul><li><i class="fa2 fa-phone"></i><span class="span-modal">' +$(this).data('telefone')+ '</li></ul><ul><li><i class="fa2 fa-phone"></i><span class="span-modal">' +$(this).data('crm')+ '</li></ul><ul><li><i class="fa2 fa-envelope"></i><span class="span-modal">' +$(this).data('email')+ '</li></ul>';
$('.info-detail2').html(to_append);
$('.modal-title').html($(this).data('nome'));
$('#myModal').modal('show');
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div>
<div class="col-sm-12" style="background-color:lavender;">
<h3>Dentistas</h3>
<div class="list-group">
<a href="#" class="list-group-item " data-nome="Antonio Andrade Santos" data-horario="Segunda Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São Paulo" data-telefone="Telefone: (00) 0000-0000" data-crm="CRM: (123)984-1234" data-email="Email: teste@hotmail.com">
<h4 class="list-group-item-heading">Antonio Andrade Santos</h4>
</a>
<a href="#" class="list-group-item" data-nome="Armando Sambataro" data-horario="Segunda Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São João" data-telefone="Telefone: (00) 00324500-0000" data-crm="CRM: (123)984-1234" data-email="Email: teste@hotmail.com">
<h4 class="list-group-item-heading">Armando Sambataro </h4>
</a>
<a href="#" class="list-group-item" data-nome="Joao Eduardo Albieri Marinho" data-horario="domingo Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: Rio Paulo" data-telefone="Telefone: (00) 0432423000-0000" data-crm="CRM: (123)9832244-1234" data-email="Email: teste@hotmail.com">
<h4 class="list-group-item-heading">Joao Eduardo Albieri Marinho</h4>
</a>
<a href="#" class="list-group-item " data-nome="Raul Coutinho Rodrigues Da Matta" data-horario="Terça Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São Paulo" data-telefone="Telefone: (00) 0342423000-0000" data-crm="CRM: (123)984-1234" data-email="Email: teste@hotmdsadsdfail.com">
<h4 class="list-group-item-heading">Raul Coutinho Rodrigues Da Matta</h4>
</a>
<a href="#" class="list-group-item " data-nome="Rodolpho Telarolli Junior" data-horario="quarta Feira - Sexta Feira: 8:00 as 18:00" data-endereco="Endereço: São Paulo" data-telefone="Telefone: (00) 0000-0000" data-crm="CRM: (123)984-12222234" data-email="Email: teste@hewfotmail.com">
<h4 class="list-group-item-heading">Rodolpho Telarolli Junior</h4>
</a>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="header-backup"></div>
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="modal-perso">
<div class="info-detail2"></div>
</div>
</div class="div-foto3x4">
<div><img src="img/foto 3x4.jpg" class="foto3x4" alt="foto"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>To do this, delete the data attributes corresponding to the modal, ..data-target="#myModal" data-toggle="modal"... Because we're going to open it manually