Simplemodal：页面上的四次导致额外的“下一个”或“上一个”按钮

Question

注意：这是根据原始问题编辑的，并提供了解决方案。原题太长，思路有很多错误。对此我深表歉意。

当调用 simplemodal div 类 .basic-modal-content 的每个实例添加一个额外的 next 或previous 按钮位于链末尾的模态窗口中。我们有两个独立的模态内容区域，它们在模态窗口中连接。

通过使用两个 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 使用 SAME CSS 样式窗口 和每个模态窗口中的自定义图像，该图像从 portrait 形式的“#modal_[number] img” CSS 派生而来.

一切正常。

还有一个问题：我在页面上有两个 JS 实例。 可以合并成一个脚本吗？

提前致谢。

DDF

Answer 1

还有一个问题：我在页面上有两个 JS 实例。可以合并成一个脚本吗？

我不明白为什么不。你试过了吗？