Modal Help

[Andrew2010]

So I am using the simple modal javascript script, but I am stuck. On my site I have a list of insect orders, and I want different information to be displayed for each link thats in the bullet list. Please visit my test site to see what I am doing: http://test.bug-catcher.com/ (in the North American Insects tab, please click on one of the bullet list links (e.g. Blattaria (Cockroaches.))

 

Now if you click each link you'll see the same content pop up, I would like it so each insect order has different content. Can someone please help me do this?

 

basic.js:

 

jQuery(function ($) {

$('#basic-modal .basic').click(function (e) {
	$('#basic-modal-content').modal();

	return false;
});
});

 

HTML:

 

<ul class="service_list">
				<div id='basic-modal'>
                                <li><a href="#" class="basic">Blattaria (Cockroaches)</a></li>
							<li><a href="#" class="basic">Coleoptera (Beetles)</a></li>
                                <li><a href="#" class="basic">Dermaptera (Earwigs)</a></li>
                                <li><a href="#" class="basic">Diptera (True Flies)</a></li> 
                                <li><a href="#" class="basic">Embiidina (Webspinners)</a></li>
                                <li><a href="#" class="basic">Ephemeroptera (Mayflies)</a></li>
                                <li><a href="#" class="basic">Hemiptera (Aphids, Cicadas & True Bugs)</a></li>
							<li><a href="#" class="basic">Hymenoptera (Ants, Bees & Wasps)</a></li>
							<li><a href="#" class="basic">Isoptera (Termites)</a></li>
							<li><a href="#" class="basic">Lepidoptera (Butterflies & Moths)</a></li>
							<li><a href="#" class="basic">Mantodea (Mantids)</a></li>
							<li><a href="#" class="basic">Mecoptera (Scorpionflies & Hangingflies)</a></li>
							<li><a href="#" class="basic">Microcoryphia (Bristletails)</a></li>
							<li><a href="#" class="basic">Neuroptera (Net-winged Insects)</a></li>
							<li><a href="#" class="basic">Notoptera (Rock Crawlers)</a></li>
							<li><a href="#" class="basic">Odonata (Dragonflies & Damselflies)</a></li>
							<li><a href="#" class="basic">Orthoptera (Grasshoppers & Their Kin)</a></li>
							<li><a href="#" class="basic">Phasmida (Walkingsticks)</a></li>
							<li><a href="#" class="basic">Phthiraptera (Lice)</a></li>
							<li><a href="#" class="basic">Plecoptera (Stoneflies)</a></li>
							<li><a href="#" class="basic">Psocoptera (Booklice & Barklice)</a></li>
							<li><a href="#" class="basic">Raphidioptera (Snakeflies)</a></li>
							<li><a href="#" class="basic">Siphonaptera (Fleas)</a></li>
							<li><a href="#" class="basic">Strepsiptera (Twisted-winged Insects)</a></li>
							<li><a href="#" class="basic">Thysanoptera (Trips)</a></li>
							<li><a href="#" class="basic">Trichoptera (Caddisflies)</a></li>
							<li><a href="#" class="basic">Zygentoma (Silverfish)</a></li>
							</div>
                            </ul>
						</p>
						<!-- modal content -->
	<div id="basic-modal-content">
		<h3>Blattaria (Cockroaches)</h3>
		<p>For this demo, SimpleModal is using this "hidden" data for its content. 
You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p>
		</div>

	<!-- preload the images -->
	<div style='display:none'>
		<img src='img/basic/x.png' alt='' />
	</div>
                      </div>

[gristoi]

jQuery(function ($) {

$('#basic-modal .basic').each(function (e) {
$(this).click(function(e){
	$('#basic-modal-content').modal();

	return false;
}});
});

you need to iterate each sibling

[Andrew2010]

Thanks for the response. I sort of get it. But still having trouble understanding how to write it. Javascript always gets me. 

Could you show how to write it? Like, I see what you did for the basic.js but what would I need to include in the HTML coding?