Question

注意：这是使用解决方案从原始问题编辑的。最初的问题太长了，思路上有很多错误。为此，我道歉。

我们遇到的问题是，对 simplemodal div class .basic-modal-content 的每个实例添加了额外的 next 或链中末尾的模态窗口中的上一个按钮。我们有两个独立的模态内容区域，它们在模态窗口加入。

这是通过拥有两个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类中保留“bar”模式的附加文本。

<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结构适用于链接的主页面。模态窗口允许人们浏览所有六个TEXT。 Windows中有一种常见的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实例。这可以合并成一个脚本吗？

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

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

1 个答案: