注意：这已从原始问题中编辑，并提供了解决方案。原题太长，思路有很多错误。为此我深表歉意。
当调用simplemodal div 类.basic-modal-content的每个实例在链末尾的模态窗口中添加一个额外的下一个或上一个按钮时，我们遇到了一个问题。我们有两个独立的模态内容区域，它们在模态窗口中连接。
这可以通过使用两个 div 类来解决：.basic-modal-content-foo 和 .basic-modal-content-bar，并在页面上有两个下面的脚本实例。所需要的只是一些 CSS ......
.basic-modal-content-foo {
display: none;
}
.basic-modal-content-bar {
display: none;
}
这是脚本的“foo”版本。修改 bar 版本的 div 类的 4 个实例。
<script>
$(function()
{
$('a.foo').each(function()
{
$(this).click(function()
{
$('#modal_' + this.id).modal({
overlayClose:true
});
});
});
var num_divs = $('div.basic-modal-content-foo').length;
$('div.basic-modal-content-foo').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-foo').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-foo').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>
和一些 CSS 为每个窗口创建一个图像，通过 ul/li 列表显示进度条。
生成上述代码的代码如下所示：
<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-foo" 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-foo" 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-foo" id="modal_six">
<img src="link to modal_six.png" alt="progress bar"/>
<h3>headline text</h3>
<p>body text</p>
</div>
并将“栏”模式的附加文本留在 div 类中。
<div class="basic-modal-content-bar" 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-bar" 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-bar" id="modal_nine">
<img src="link to modal_nine.png" alt="portrait 3"/>
<h3>headline text</h3>
<p>BIOGRAPHY</p>
</div>
</div>
ul/li 结构适用于链接的主页。模态窗口允许浏览所有六个文本。窗口有一个通用的 CSS 样式，每个模态窗口中都有一个自定义图像，从进度条形式的“#modal_[number] img”CSS 派生。
这是来自三个传记链接之一的相关代码。您会注意到，在当前配置中，每个传记链接都必须包含所有三个。
<h4>Our HEADLINE</h4>
<div id="basic-modal">
<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="#" class="bar" id="seven" >Expand</a>
</p>
</div>
</div>
同样，“传记”从页面的不同区域打开。模态窗口允许浏览所有三个 BIO。bios 使用相同的 CSS 样式窗口和每个模态窗口中的自定义图像，该图像从 "#modal_[number] img" CSS 以肖像的形式派生。
一切运作良好。
剩下一个问题：我在页面上有两个 JS 实例。这可以组合成一个脚本吗？
提前致谢。
DDF