I'm using Eric Martin's SimpleModal plugin (thanks, Eric for sharing such a great solution!) on a project and have run into a few problems integrating OnOpen and OnClose effects into my existing code.
The page I'm working on has 6 different modals with prev/next functionality and I can't figure out how to integrate the following onOpen effects to my existing prev/next code.
I'm relatively new to JQuery and have been spinning my wheels on this for a few days. Thank you in advance for any and all help.
onOpen sample (courtesy of Eric Martin's SimpleModal project page) that I'd like to incorporate for starters:
$("#element-id").modal({onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () { dialog.container.slideDown('slow', function () { dialog.data.fadeIn('slow'); }); }); }});
My existing code with prev/next functionality:
$(function()
{
$('a.foo').each(function()
{
$(this).click(function()
{
$('#modal_' + this.id).modal({
overlayClose:true
});
});
});
var num_divs = $('div.basic-modal-content').length;
$('div.basic-modal-content').each(function(i)
{
if (i > 0)
{
var prev_id = $(this).prev('.basic-modal-content').attr('id');
$('<a href="#" class="simplemodal-container-prev"></a>')
.click(function()
{
$.modal.close();
$('#' + prev_id).modal({overlayClose:true});
})
.appendTo($(this));
}
if (i < num_divs - 1)
{
var next_id = $(this).next('.basic-modal-content').attr('id');
$('<a href="#" class="simplemodal-container-next"></a>')
.click(function()
{
$.modal.close();
$('#' + next_id).modal({overlayClose:true});
})
.appendTo($(this));
}
});
});
Thanks again for your feedback!