hola esoy haciendo un proyecto en donde el usiario tiene un mapa con puntos y al dar click en esos puntos se habre un SimpleModal y muestra una descripcion del punto.
Este es el codigo
EL HTML Código HTML:
<div id='basic-modal'>
<a href='#' class='basic1'> Demo1 </a><br>
<a href='#' class='basic2'> Demo2 </a><br>
<a href='#' class='basic3'> Demo3 </a><br>
<a href='#' class='basic4'> Demo4 </a><br>
<a href='#' class='basic5'> Demo5 </a><br>
<a href='#' class='basic6'> Demo6 </a><br>
<a href='#' class='basic7'> Demo7 </a><br>
<a href='#' class='basic8'> Demo8 </a><br>
<a href='#' class='basic9'> Demo9 </a><br>
<a href='#' class='basic10'> Demo10 </a><br>
</div>
<div id="basic-modal-content1"><h3>Eejemplo-1</h3><div style='display:none'><img src='img/basic/x.png'alt=''/></div></div>
<div id="basic-modal-content2"><h3>Eejemplo-2</h3><div style='display:none'><img src='img/basic/x.png'alt=''/></div></div>
<div id="basic-modal-content3"><h3>Eejemplo-3</h3><div style='display:none'><img src='img/basic/x.png'alt=''/></div></div>
<div id="basic-modal-content4"><h3>Eejemplo-4</h3><div style='display:none'><img src='img/basic/x.png'alt=''/></div></div>
<div id="basic-modal-content5"><h3>Eejemplo-5</h3><div style='display:none'><img src='img/basic/x.png'alt=''/></div></div>
EL JS
Código:
jQuery(function ($) {
$('#basic-modal .basic1').click(function(e){$('#basic-modal-content1').modal(); return false;});
$('#basic-modal .basic2').click(function(e){$('#basic-modal-content2').modal(); return false;});
$('#basic-modal .basic3').click(function(e){$('#basic-modal-content3').modal(); return false;});
$('#basic-modal .basic4').click(function(e){$('#basic-modal-content4').modal(); return false;});
$('#basic-modal .basic5').click(function(e){$('#basic-modal-content5').modal(); return false;});
});
Funiona bien el problema es que tengo mas de 200 puntos y tendria que hacer uno SimpleModal para cada uno.
Mi pregunta es hay alguna manera de semplificar este codigo ???
Si algien me puede ayudar se los agradeceria mucho.