Simplemodal: four times on a page leads to extra "next" or "previous" button
- by DDF
We are experiencing a problem with each instance of the call to the simplemodal div class .basic-modal-content adding an extra next or previous button in the modal windows.
We are using simplemodal in four places on a page using a common JS in the container (provided below) and a common CSS format for the modal windows.
In one area we are using six "statements" in a window with a next and previous button. I would include a picture of the modal window but it's being disallowed by the system as I'm a first time poster to this forum.
In the other three areas we are using three "biographies" in a similar window with the ability to see each of the three bios from each of modal windows.
We are using a common Simplemodal JS script in the page which has the following code:
<script>
$(function()
{
$('a').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 there is a previous div add a link to it
*/
if (i > 0)
{
/* get the ID for previous div
*/
var prev_id = $(this).prev('.basic-modal-content').attr('id');
/* add the link with click event
*/
$('<a href="#" class="simplemodal-container-prev"></a>')
.click(function()
{
$.modal.close();
$('#' + prev_id).modal({overlayClose:true});
})
.appendTo($(this));
}
/* if there is a next div add a link to it
*/
if (i < num_divs - 1)
{
/* get the ID for next div
*/
var next_id = $(this).next('.basic-modal-content').attr('id');
/* add the link with click event
*/
$('<a href="#" class="simplemodal-container-next"></a>')
.click(function()
{
$.modal.close();
$('#' + next_id).modal({overlayClose:true});
})
.appendTo($(this));
}
});
});
</script>
and some CSS to create an image for each window that shows the progress bar through the ul/li list.
The code to produce the above looks like this:
<h1>Our HEADLINE</h1>
<div id='basic-modal'>
<ul>
<li><a href='#' id='one'>TEXT 1</a></li>
<li><a href='#' id='two'>TEXT 2</a></li>
<li><a href='#' id='three'>TEXT 3</a></li>
<li><a href='#' id='four'>TEXT 4</a></li>
<li><a href='#' id='five'>TEXT 5</a></li>
<li><a href='#' id='six'>TEXT 6</a></li>
</ul>
</div>
<div class="basic-modal-content" id="modal_one">
<img src="link to modal_one.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>
<div class="basic-modal-content" id="modal_two">
<img src="link to modal_two.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>
<div> ... other divs 3 4 and 5 </div>
<div class="basic-modal-content" id="modal_six">
<img src="link to modal_six.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>
</div>
The ul/li structure works on the main page for the links. The modal windows allow one to browse through all of the six TEXTs. There is a common CSS style to the windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a progress bar.
It should be noted that the first modal window in the first set of ul/li (the six) do not exhibit the extra previous button.
Here is the relevant code from one of the three biographic links. You will note that the biographic links each have to have all three in this current configuration.
<h4>Our HEADLINE</h4>
<div class="bottom-widget-text">
<img src="picture" alt="not relevant to the simplemodal problem"/>
<p>Read about person NUMBER 1 by clicking on the following link:
<a href='#' id='seven' >Expand</a>
</p>
</div>
<div class="basic-modal-content" id="modal_seven">
<img src="link to modal_seven.png" alt="portrait 1"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
<div class="basic-modal-content" id="modal_eight">
<img src="link to modal_eight.png" alt="portrait 2"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
<div class="basic-modal-content" id="modal_nine">
<img src="link to modal_nine.png" alt="portrait 3"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
</div>
Similarly the "biographies" open up from a different area of the page. The modal windows allow one to browse through all three of the BIOs. The bios use the SAME CSS style windows and a custom image in each of the modal windows derived from the "#modal_[number] img" CSS in the form of a portrait.
Everything is working well except one thing: the first six windows have an extra next button that leads to an image of the close widow button only.
Similarly, the BIOs pages have extra previous button that leads to the same "close button only" shown above.
We want to maintain the same base CSS for the modal windows for this page. We want to keep the JS simple. The only behavior that is bad is the extra previous and next bottons that appear to be spurious.
So is this a fix to the JS?
Or do I have the instances of the modal windows too entangled?
Perhaps there is a better method for having multiple instances of a simplemodal window on the same page?
Or is the problem the "#" variable being common to each of the uses of the JS?
Thanks in advance.
DDF
