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
