Wednesday, April 11, 2012

Multiple SimpleModals on one page

Newbie question I think, but maybe not... I am using SimpleModal for a project, and have a case where there are multiple triggers and modals on a page.



Page is here: http://lumetta.highchairdesign.com/newsite/lumenate-portfolio/linen



Markup for the trigger is like:



<a class="modalbutton" href="#item_31" title="D112 Sand"
style="background-image: url(/newsite/documents/gallery_photos/59.D112-Sand.jpg);">
</a>


Markup for the Modal is like:



<div id="#item_31" class="modal">
<h3>D112 Sand</h3>
<a href="javascript:;" class="lumenate_largethumb" style="background-image: url(/newsite/documents/gallery_photos/59.D112-Sand.jpg);">
</a>
</div>


Yes, I know it's odd, but the modal contains a sprite so that is why I am using an A with a background image...



My JS looks like:



$(".modalbutton").click(function (e) {

var iden = $(this).attr("href");

$("" + iden + "").modal( {
close: true
});
});


My JS is trying to figure out which link has been clicked, and inject it with the proper DIV. I get the click action, I get the modal container to appear, but the content does not get injected.



I tried quotes around the "iden" variable, I tried no quotes... doesn't help. I tried thedirect call to the modal action, which looks like $.modal( $( iden ), { etc..., no luck there. I tried passing the content div ID to the proper setting variable for SimpleModal, which is "dataId"... no dice.



I'm losing my mind and going to bed. This was supposed to be simple. Help?





No comments:

Post a Comment