Varios SimpleModal en uno

[bemitoreya]

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.

[Rosencrantz]

Yo pondria el html asi

Código:

<div id='basic-modal'>
<a href='#' class='basic' id="1"> Demo1  </a><br>
<a href='#' class='basic' id="2"> Demo2  </a><br>
<a href='#' class='basic' id="3"> Demo3  </a><br>
<a href='#' class='basic' id="4"> Demo4 </a><br>
<a href='#' class='basic' id="5"> Demo5 </a><br>
.
.
.
</div>

jquery

Código:

jQuery(function ($) {
$('#basic-modal .basic').click(function(e)
     var indice=$(this).attr('id');
     {$('#basic-modal-content'+indice).modal(); 
     return false;
});

});